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>
以上所述就是本文的全部内容了,希望大家能够喜欢。