search

Home >Web Front-end >JS Tutorial >jQuery css3 realizes text shaking up and down following the mouse_jquery

jQuery css3 realizes text shaking up and down following the mouse_jquery

WBOY
WBOYOriginal
2016-05-16 15:47:481845browse

Css3 transition attribute is combined with jq. If you copy the code directly and run it, you need to load a jquery file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-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:0 50px;}
.hover-list{ line-height:40px; width:500px;}
.hover-list li{ height:40px; border-bottom:1px solid #969; position:relative;}
.hover-list li a span{ width:12px; height:40px;cursor:pointer;transition:all .1s cubic-bezier(.06,1.15,1,1.4) 0s;}
.hover-list li a{ color:#39F; cursor:pointer;}
</style>
<body>
<div class="demo">
  <div class="wrapper box-con">    
    <ul class="hover-list">
      <li><a href="http://www.miaov.com/2013/#" target="_blank">我们内地，大红撒谎道夫们内地道夫们内地</a></li>
      <li><a href="#2">方法我阿道道夫们内地夫们内大红撒谎道夫们内地道夫们内地地，大红撒谎</a></li>
      <li><a href="#2">是我们内地，道夫们内地大红撒谎</a></li>
      <li><a href="#2">大红撒方法我阿道道夫们内地夫们内大红撒谎道夫们内地道夫们内地地谎</a></li>
      <li><a href="#2">我们内地，大红撒谎道夫们内地道夫们内地</a></li>
      <li><a href="#2">方法我阿道道夫们内地夫们内大红撒谎道夫们内地道夫们内地地，大红撒谎</a></li>
      <li><a href="#2">是我们内地，道夫们内地大红撒谎</a></li>
    </ul>
  </div>
</body>
<script src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
 
//demo
  //可以变化的参数
  var setccid=$(".hover-list");//设置ul的class,添加效果
  var setleft=12;//设置字与字之间的left值
  var setskip=10;//设置上下抖动值
   
  var hov=setccid.children("li");
  for(var i=0;i<hov.length;i++){
    var hovtext=hov.eq(i).find("a").html();
    var hovtextl=hovtext.length;
    //alert(hovtextl)
    var hovtexta=hovtext.split("");
    var arrys=[];
    for(var j=0;j<hovtexta.length;j++){
      arrys.push(hovtexta[j].replace(hovtexta[j],"<span>"+hovtexta[j]+"</span>"))
    };
    hov.eq(i).find("a").html(arrys);
    var hovtextspan=hov.eq(i).find("a").find("span").length;
    for(var z=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){
    var sppz=$(this).index();
    var sppzp=$(this).parent().children("span");
    var sppzpl=$(this).parent().children("span").length;
    var sppy=$(this).offset().top;
    var ey=event.pageY;
    var chay=sppy+$(this).height()/2;
    var sppcony=$(this).position().top; 
    if(ey>=chay) {
      $(this).css('top',sppcony+setskip);
      var lla=sppcony+setskip;
      var lll=lla;
      var llr=lla;
      var teshu=(sppz-lla)>0&#63;sppz-lla:0;    
      for(var xx=sppz+1;xx<=sppz+lla;xx++){
        llr=llr-1;
        sppzp.eq(xx).css('top',llr);   
      };
      for(var x=sppz-1;x>=teshu;x--){
        lll=lll-1;
        sppzp.eq(x).css('top',lll); 
      }; 
    }else{
      $(this).css('top',sppcony-setskip);
      var lla=sppcony-setskip;
      var lll=lla;
      var llr=lla;
      var teshu=(sppz+lla)>0&#63;sppz+lla:0;
      for(var xxxx=sppz+1;xxxx<=sppz-lla;xxxx++){
        llr=llr+1;
        sppzp.eq(xxxx).css('top',llr);
      }; 
      for(var xxx=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>

The above is the entire content of this article, I hope you all like it.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Usage examples of Taobao travel universal calendar component implemented in javascript_javascript skillsNext article：Usage examples of Taobao travel universal calendar component implemented in javascript_javascript skills

Related articles

See more