左右摇摆
Posted 舍近求猿
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了左右摇摆相关的知识，希望对你有一定的参考价值。
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>
以上是关于左右摇摆的主要内容，如果未能解决你的问题，请参考以下文章