function animate(dom, cssObj, duration, callback) {
//dom是要运动的元素,cssObj是要运动的属性对象如:{left:700,top:400}, duration元素运动到目标距离的总时长
// 定义间隔
var interval = 20;
// 定义一个新的对象 该对象用于存放dom元素的现在的值
var nowObj = {};
// 循环cssObj,依次获取每一个属性名和属性值
for (var i in cssObj) {
nowObj[i] = parseInt(getStyle(dom, i))
}
// 定义总次数
var allCount = duration / interval;
// 定义计数器
var count = 0;
var timer = setInterval(function () {
count++;
for (var i in cssObj) {
// 计算总距离
var distance = cssObj[i] - nowObj[i];
// 计算单次步长
var step = distance / allCount;
// 赋予样式
if (i.toLowerCase() === "opacity") {
dom.style[i] = nowObj[i] + count * step;
} else {
dom.style[i] = nowObj[i] + count * step + "px";
}
}
if (count >= allCount) {
clearInterval(timer);
// 判断 有回调函数就执行回调函数 没有回调函数就不执行
if (callback) {
callback();
}
// callback && callback();
}
}, interval);
// 定义获取样式函数
function getStyle(dom, cssProp) { //cssProp要运动元素的运动属性如:left,top
if (window.getComputedStyle) {
return window.getComputedStyle(dom)[cssProp];
}
return dom.currentStyle[cssProp];
}
}
封装一个animate函数,使元素以指定的方向和目标距离移动
最新推荐文章于 2023-02-07 14:40:31 发布