首页 > 代码库 > 左右摇摆

左右摇摆

 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_d213     {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>

 

左右摇摆