有意思的效果——左右摇摆
Posted 起个好名字
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了有意思的效果——左右摇摆相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .box{width: 1000px;height: 400px;background: deepskyblue;} 8 .a{width: 50px;height: 400px;background: #FFFFFF;float:left;border: 1px solid black;position: relative;} 9 .b{width: 0;height: 400px;background: deepskyblue;float: left;} 10 </style> 11 <script src="js/jquery-1.11.3.js"></script> 12 <script> 13 $(function(){ 14 flag=[0,0,0,0,0]//原来控制器还能这么玩 15 //alert(flag[3]) 16 17 $(".a").mouseenter(function(){ 18 //alert($(this).index() 19 move($(this).index()) 20 21 }) 22 23 function move(n){ 24 if(flag[n]==0){ 25 26 $(".a").eq(n).animate({left:700},1000,function(){ 27 $(".a").eq(n).css({background:"red"}) 28 $(".a").eq(n).text("aaaa") 29 }) 30 flag[n]=1 31 32 33 }else if(flag[n]==1){ 34 var a=700; 35 36 $(".a").eq(n).animate({left:0},500,function(){ 37 $(".a").eq(n).css({background:"white"}) 38 39 }) 40 flag[n]=0 41 } 42 } 43 44 }) 45 46 </script> 47 </head> 48 <body> 49 <div class="box"> 50 51 <div class="a" >呀呀呀</div> 52 53 <div class="a" >哈哈哈</div> 54 55 <div class="a" >吼吼吼</div> 56 57 <div class="a" >呜呜呜</div> 58 59 <div class="a" >呃呃呃</div> 60 61 </div> 62 </body> 63 </html>
以上是关于有意思的效果——左右摇摆的主要内容，如果未能解决你的问题，请参考以下文章