定时器——移动div

本文介绍了如何使用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 要获取的样式名
			 */
			
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值