拼团微信小程序_js学使用setTimeout完成轮循动画

2021-01-11 16:07| 发布者: | 查看: |

js学使用setTimeout实现轮循动画       这篇文章主要为大家详细介绍了js使用setTimeout实现轮循动画,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了setTimeout实现轮循动画的具体代码,供大家参考,具体内容如下

代码如下:

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title Document /title 
 /head 
 body 
 div id='box' /div 
 script 
 var oBox = document.getElementById("box");
 var maxLeft = utils.win('clientWidth')-oBox.offsetWidth;
 var step = 5;
 var timer = null;
 //使用递归思想完成setTimeout的轮循动画:每一次在执行动画之前把上一次设置没用的定时器清除掉,节约我们的内存空间
 function move(){
 window.clearTimeout(timer);
 var curLeft = utils.css(oBox,"left");
 if(curLeft+step = maxLeft){//边界判断
 utils.css(oBox,"left",maxLeft);
 return;
 curLeft+=step;
 utils.css(oBox,"left",curLeft);
 timer = window.setTimeout(move,10)
 move();
 /script 
 /body 
 /html 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


<
>

 
QQ在线咨询
售前咨询热线
18720358503
售后服务热线
18720358503
返回顶部