封装js动画函数

65 阅读 0 评论 43 点赞

我是靠谱客的博主鲤鱼枫叶，最近开发中收集的这篇文章主要介绍封装js动画函数，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

封装js动画函数

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
// 封装动画执行函数
/*
参数
obj:要执行的动画对象
attr:要执行动画的样式,left
target:执行动画的目标位置
speed:移动的速度（整数向右移动，负数向做移动）
callback:回调函数
*/
function move(obj, attr, target, speed, callback) {
// 关闭定时器
clearInterval(obj.timer)
// 获取元素位置
var current = parseInt(getStyle(obj, attr))
// 判读速度正负值
if (current > target) {
// 此时速度应为负值
speed = -speed
}
// 开启一个定时器
obj.timer = setInterval(function () {
// 获取原来的left值
var oldValue = parseInt(getStyle(obj, attr))
// 在旧值的基础上增加
var newValue = oldValue + speed
// 判断newValue是否大于800
// 向左移动,则需要判断newValue是否小于target
// 向右移动,则需要判断newValue是否大于target
if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
newValue = target
}
// 将新值设置为box1
obj.style[attr] = newValue + 'px'
// 将元素移到0px时,停止动画
if (newValue == target) {
// 达到目标关闭定时器
clearInterval(obj.timer)
// 动画执行完毕,调用回调函数
callback && callback()
}
}, 30)
/*
参数
obj 要获取样式的元素
name 要获取的样式名
*/
function getStyle(obj, name) {
if (window.getComputedStyle) {
return getComputedStyle(obj, null)[name]
} else {
// IE8的方式,没有getComputedStyle()方法
return obj.currentStyle[name]
}
}
}
</script>
</body>
</html>