// 创建一个执行简单动画的函数。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 要获取的样式名
*/
定时器——移动div
最新推荐文章于 2024-11-08 16:09:18 发布
本文介绍了如何使用JavaScript创建定时器来动态移动div元素,详细阐述了相关原理及代码实现,帮助读者理解定时器在前端动画中的应用。
摘要由CSDN通过智能技术生成