jQuery+css3实现文字跟随鼠标的上下抖动
css3过渡属性结合jq，如果直接复制代码运行，需要加载一个jquery文件
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>m</title>
</head>
<style>
/*CSS预设*/
*{margin:0;padding:0;}
a{text-decoration:none;}
img{border:none;}
ul{list-style:none;}
body{color:#222121;font-size:12px;font-family:"宋体";background-color:#fefefe}
.clearfix:after{content:".";display:block;height:0;clear:both;overflow:hidden;}
.clearfix{zoom:1;}
/*clear*/
.left{float:left;}
.right{float:right;}
.clear{clear:both;}
/*demo4*/
.demo{margin:050px;}
.hover-list{line-height:40px;width:500px;}
.hover-listli{height:40px;border-bottom:1pxsolid#969;position:relative;}
.hover-listliaspan{width:12px;height:40px;cursor:pointer;transition:all.1scubic-bezier(.06,1.15,1,1.4)0s;}
.hover-listlia{color:#39F;cursor:pointer;}
</style>
<body>
<div>
<div>
<ul>
<li><ahref="http://www.miaov.com/2013/#"target="_blank">我们内地，大红撒谎道夫们内地道夫们内地</a></li>
<li><ahref="#2">方法我阿道道夫们内地夫们内大红撒谎道夫们内地道夫们内地地，大红撒谎</a></li>
<li><ahref="#2">是我们内地，道夫们内地大红撒谎</a></li>
<li><ahref="#2">大红撒方法我阿道道夫们内地夫们内大红撒谎道夫们内地道夫们内地地谎</a></li>
<li><ahref="#2">我们内地，大红撒谎道夫们内地道夫们内地</a></li>
<li><ahref="#2">方法我阿道道夫们内地夫们内大红撒谎道夫们内地道夫们内地地，大红撒谎</a></li>
<li><ahref="#2">是我们内地，道夫们内地大红撒谎</a></li>
</ul>
</div>
</body>
<scriptsrc="js/jquery-1.10.2.js"></script>
<scripttype="text/javascript">
$(function(){
//demo
//可以变化的参数
varsetccid=$(".hover-list");//设置ul的class,添加效果
varsetleft=12;//设置字与字之间的left值
varsetskip=10;//设置上下抖动值
varhov=setccid.children("li");
for(vari=0;i<hov.length;i++){
varhovtext=hov.eq(i).find("a").html();
varhovtextl=hovtext.length;
//alert(hovtextl)
varhovtexta=hovtext.split("");
vararrys=[];
for(varj=0;j<hovtexta.length;j++){
arrys.push(hovtexta[j].replace(hovtexta[j],"<span>"+hovtexta[j]+"</span>"))
};
hov.eq(i).find("a").html(arrys);
varhovtextspan=hov.eq(i).find("a").find("span").length;
for(varz=0;z<hovtextspan;z++){
hov.eq(i).find("a").find("span").eq(z).css({position:"absolute",top:"0px"});
hov.eq(i).find("a").find("span").eq(z).css('left',z*setleft);
}
};
setccid.children("li").find("a").children("span").hover(function(event){
varsppz=$(this).index();
varsppzp=$(this).parent().children("span");
varsppzpl=$(this).parent().children("span").length;
varsppy=$(this).offset().top;
varey=event.pageY;
varchay=sppy+$(this).height()/2;
varsppcony=$(this).position().top;
if(ey>=chay){
$(this).css('top',sppcony+setskip);
varlla=sppcony+setskip;
varlll=lla;
varllr=lla;
varteshu=(sppz-lla)>0?sppz-lla:0;
for(varxx=sppz+1;xx<=sppz+lla;xx++){
llr=llr-1;
sppzp.eq(xx).css('top',llr);
};
for(varx=sppz-1;x>=teshu;x--){
lll=lll-1;
sppzp.eq(x).css('top',lll);
};
}else{
$(this).css('top',sppcony-setskip);
varlla=sppcony-setskip;
varlll=lla;
varllr=lla;
varteshu=(sppz+lla)>0?sppz+lla:0;
for(varxxxx=sppz+1;xxxx<=sppz-lla;xxxx++){
llr=llr+1;
sppzp.eq(xxxx).css('top',llr);
};
for(varxxx=sppz-1;xxx>=teshu;xxx--){
lll=lll+1;
sppzp.eq(xxx).css('top',lll);
};
}
},function(event){
$(this).css('top',"0px");
$(this).parent().children("span").css('top',"0px");
});
//end
});
</script>
</html>
以上所述就是本文的全部内容了，希望大家能够喜欢。