JS图片加速跑 图片折返跑 多次点击速度加快bug处理
这个JS效果比较单一，就是一个按钮来控制这个图片左右来回运动，这种效果在前端开发里用的可能性不会太多。但能运用到几个常用JS的基础的知识，下面开始详细举例说明：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #tt{ position: absolute; /*left: 0px;*/ top: 100px; } </style> <script type="text/javascript"> window.onload = function(){ var dd = document.getElementById('dd'); var tt = document.getElementById('tt'); var aa;//先声明一下变量，要不然下面一开始清理定时器，没有这个变量，就会报错了 // (因为定时器,你点多一次就会多执行一次:所以会越来越快) // 解决定时器叠加的思路:在设置定时器之前,先清理定时器 // 新的加多一个变量,多了这个变量好操作(方便下面的10变灵活) var yy = 10; // 给按钮加单击事件 dd.onclick = function(){ // 先清理定时器,把如果有第二次点击的,就会回到函数先清理上一次的定时器,这样减少:点一次减一次 clearInterval(aa); // 定时器 这里直接aa设成一个局变量，因为 var aa 是局部变量会控制不到下一个点击的定时器执行的变量 aa=setInterval(function(){ // 原来的值 var uu = tt.style.left; // 新的值 // var kk = parseInt(uu)+10; 原来的 var kk = parseInt(uu)+yy; //现在的 // 赋值回去 tt.style.left = kk+'px'; // 判断边界 // if (kk==800) { //// 定时器是不会停止的,当运动到800的时候,开始+-10(加负值),减10往回走 // yy = -10; // } // else if(kk==0){ //// 当往回走到0时,又变成加10往走 // yy= 10; // } // 也可以这样写 正负值区分，负负得正，正负得负。 // if (kk==800) { //// 本来yy就是等于正10的，乘以负数，等于-10 // yy = yy*-1; // } // else if(kk==0){ //// 当往回走到0时,又变成加10往走 ##上面的一步yy变-10了，现在再乘以负1，负负得正##变成正10又往前走了 // yy= yy*-1; // } // // 再精减代码 if (kk==800 || kk==0) { // 来回反转 yy=yy*-1; } },100) } } </script> </head> <body> <input type="button" name="dd" id="dd" value="一点就跑!" /> <br /><br /> <img src="https://www.qiquanji.com/mip/data/img/dmj/201903161552740859142134.gif" alt="" id="tt" style="left: 0px;"/> </body> </html> 
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知