我是靠谱客的博主 鲤鱼枫叶,这篇文章主要介绍封装js动画函数,现在分享给大家,希望可以做个参考。

封装js动画函数

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!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>

最后

以上就是鲤鱼枫叶最近收集整理的关于封装js动画函数的全部内容,更多相关封装js动画函数内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(73)

评论列表共有 0 条评论

立即
投稿
返回
顶部