js学习笔记 —— 动画封装

动画函数封装

//配合下面函数使用
/*
* 样式查询
* el:dom对象
* styleStr：样式的名字
*/
function getStyle(el, attr) {
if (window.getComputedStyle) {
//其它浏览器
return window.getComputedStyle(el)[attr]
} else {
//ie8及以下的
return el.currentStyle[attr]
}
}
/*
* 动画函数
* el 操作的对象
* attr属性值
* terhet目标位置
* speed速度
* callback回调函数
*/
function move(el,attr,target,speed,callback) {
// 关闭计时器
clearInterval(el.interId);
// 调用函数查询当前位置并将结果转化成数字
let currentVlaue = parseInt(getStyle(el,attr));
/*
* 判断变化方向
* spaeed如果大于currentVlaue则表示向左或上移动应为减
* 反之则加
*/
if(currentVlaue > target) {
speed = - speed;
}
// 动画执行过程
el.interId = setInterval(function () {
// 获取元素当前位置
let oldValue = parseInt(getStyle(el, attr)),
// 计算移动后的新位置
newValue = oldValue + speed;
// 判断当前位置与目标位置的关系
if (speed > 0 && newValue >= target || speed < 0 && newValue <= target) {
newValue = target;
}
// 将位置改为新位置
el.style[attr] = newValue + "px";
// 判断是否到达目标位置
if (newValue === target) {
// 关闭计时器
clearInterval(el.interId)
// 判断是否有回调函数等同于下面注释掉的方式
callback && callback()
// if(callback){
//
callback()
// }
}
}, 30);
}

最后

以上就是敏感马里奥为你收集整理的js学习笔记 —— 动画封装的全部内容，希望文章能够帮你解决js学习笔记 —— 动画封装所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。