首页 > 代码库 > 有意思的效果——左右摇摆

有意思的效果——左右摇摆

2024-09-01 01:02:41   216人阅读

 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>

 

有意思的效果——左右摇摆


联系
我们