左右摇摆 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7     *
 8     {
 9         margin: 0;
10         padding: 0;
11     }
12     #z_d1,#z_d2
13     {
14         width: 300px;
15         height: 300px;
16         background: pink;
17     }
18     </style>
19 </head>
20 <body>
21     <input type="button" value="我是摇摆哥" id="z_inp1">
22     <div id="z_d1"></div>
23     <input type="button" value="+" id="z_inp2">
24     <div id="z_d2"></div>
25 
26     <!-- =====================JS========================-->
27     <script>
28         var z_inp1=document.getElementById('z_inp1');
29         var z_d1=document.getElementById('z_d1');
30         var z_inp2=document.getElementById('z_inp2');
31         var z_d2=document.getElementById('z_d2');
32         var a=1,b=0;
33         //左右摇摆
34         z_inp1.onclick=function() {
35             if (a==1) {
36                 z_d1.style.marginLeft="10px";
37                 a=0;
38             }else{
39                 z_d1.style.marginLeft="-10px";
40                 a=1;
41             };
42         };
43 
44         //无限＋    
45         z_inp2.onclick=function(){
46             b+=10;
47             z_d2.style.marginLeft=b+"px";    
48         };
49 
50     </script>
51 </body>
52 </html>

 

posted @ 2016-08-28 17:40  舍近求猿  阅读(152)  评论(0)    收藏  举报