js学使用setTimeout实现轮循动画
更新时间：2017年07月17日 15:05:07 作者：diasa
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- JavaScript使用setTimeout实现倒计时效果
- JavaScript setTimeout()基本用法有哪些
- JavaScript setInterval()与setTimeout()计时器
- 简单通过settimeout看javascript的运行机制
- 如何通过setTimeout理解JS运行机制详解
- 从setTimeout看js函数执行过程
- JavaScript计时器用法分析【setTimeout和clearTimeout】
- 详解JS中定时器setInterval和setTImeout的this指向问题
- JavaScript中setTimeout的那些事儿
- JS关于for循环中使用setTimeout的四种解决方案
相关文章
这篇文章主要介绍了详解JSON.stringify()的5个秘密特性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
本文主要介绍了小程序页面onload(),onready()加载顺序，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
最近在做一个通用的配置模块。配置模块中必然要对系统的菜单、功能模块、权限资源等进行配置，为了更好的用户体验，图标是必不可少的！2011-07-07
教你修改element-ui源码给el-dialog添加全屏功能
el-dialog组件提供了fullscreen功能，但是无法满足业务需求。系统使用了许多dialog，不方便重新封装dialog组件，故直接对源码进行修改，这篇文章主要介绍了修改element-ui源码给el-dialog添加全屏功能,需要的朋友可以参考下2022-11-11
bootstrap select2插件用ajax来获取和显示数据的实例
今天小编就为大家分享一篇bootstrap select2插件用ajax来获取和显示数据的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
在 JavaScript 开发中,对象和数组的复制是一个非常常见的操作,无论是函数参数传递、状态管理,还是避免不必要的副作用,了解和掌握各种复制方式至关重要,我们将系统梳理 JavaScript 中的几种常见复制方法,并对其应用场景进行详细说明,需要的朋友可以参考下2024-10-10
在实际工作中,开发者常面临一些需巧妙编程解决的挑战,有时几行代码就能迎刃而解,本文整理了一系列实用代码片段,助您轻松处理URL、DOM操作、事件处理等常见问题,希望对大家有所帮助2023-11-11
这篇文章主要为大家总结了一些JavaScript中字符串的常用方法，文中的示例代码讲解详细，对我们学习JavaScript有一定的帮助，需要的可以参考一下2022-12-12
本文主要分享了js实现适合新闻类图片轮播效果的示例代码，具有一定的参考价值，下面跟着小编一起来看下吧2017-02-02
清空代码防止查看源代码的js代码...2007-07-07
最新评论