定时器——移动div

最新推荐文章于 2024-11-13 17:27:29 发布

CZNEU

最新推荐文章于 2024-11-13 17:27:29 发布

阅读量256

点赞数

分类专栏： JS案例文章标签： javascript

本文链接：https://blog.csdn.net/CZNEU/article/details/115036226

版权

本文介绍了如何使用JavaScript创建定时器来动态移动div元素，详细阐述了相关原理及代码实现，帮助读者理解定时器在前端动画中的应用。

摘要由CSDN通过智能技术生成

// 创建一个执行简单动画的函数。box要执行盒子，attr要执行动画的样式，target，speed速度（正右负左）,callback动画执行完毕之后执行
			function move(box, attr, target, speed, callback) {
   
				clearInterval(box.timer);
				var current = parseInt(getStyle(box, attr));
				if (current > target) {
   
					speed = -speed;
				}
				box.timer = setInterval(function() {
   
					var oldValue = parseInt(getStyle(box, attr));
					var newValue = oldValue + speed;
					if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
   
						newValue = target;
					}
					box.style[attr] = newValue + "px";
					if (newValue == target) {
   
						clearInterval(box.timer);
						// 动画执行完毕
						callback();
					}
				}, 30);
			};
			/*
			 * 定义一个函数，用来获取指定元素的当前的样式
			 * 参数：
			 * 		obj 要获取样式的元素
			 * 		name 要获取的样式名
			 */