js运动框架封装函数

119 阅读 0 评论 79 点赞

我是靠谱客的博主甜美大白，这篇文章主要介绍js运动框架封装函数，现在分享给大家，希望可以做个参考。

封装一个函数，实现任意一个div都可以自由移动，整体的代码是下面这样

复制代码

<button>点击</button>
<button>点击2</button>
<div></div>
<script>
var div = document.querySelector('div');
var but = document.querySelector('button')
var but2 = document.getElementsByTagName('button')[1]
//obj目标对象，target目标位置
//给不同的元素指定了不同的定时器
function animate(obj,target,callback){
//当不断点击按钮的时候，元素会运动的越来越快，因为开启了太多的定时器
//这时再开定时器之前就要关闭上一个定时器
clearInterval(obj.timer);
//开定时器之前，将上一个定时器关掉
obj.timer = setInterval(function(){
//步长值写到定时器里面
//把步长值改为整数，不要出现小数
//var step = Math.ceil((target - obj.offsetLeft)/10) //步长
var step = (target - obj.offsetLeft)/10;
step = step > 0 ? Math.ceil(step):Math.floor(step);
if(obj.offsetLeft == target){
//停止动画，本质是停止定时器
clearInterval(obj.timer)
//回调函数写道定时器里面
if(callback){
//调用函数
callback();
}
}
//把每次加1这个步长值改为一个慢慢变小的值
obj.style.left = obj.offsetLeft + step + 'px';
},15)
}
but.addEventListener('click',function(){
animate(div,500)
})
but2.addEventListener('click',function(){
animate(div,800,function(){div.style.background = 'yellow'})
})
//缓动动画原理
//让盒子每次移动的举例慢慢变小，速度就会慢慢落下来
//核心算法:(目标值-现在的位置)/10，作为每次移动的距离，步长
//停止条件：让当前盒子位置等于目标位置就停止定时器

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
 <button>点击</button>
<button>点击2</button>
<div></div>
<script>
var div = document.querySelector('div');
var but = document.querySelector('button')
var but2 = document.getElementsByTagName('button')[1]
//obj目标对象，target目标位置
//给不同的元素指定了不同的定时器
function animate(obj,target,callback){
//当不断点击按钮的时候，元素会运动的越来越快，因为开启了太多的定时器
//这时再开定时器之前就要关闭上一个定时器
clearInterval(obj.timer);
//开定时器之前，将上一个定时器关掉
obj.timer = setInterval(function(){
//步长值写到定时器里面
//把步长值改为整数，不要出现小数
//var step = Math.ceil((target - obj.offsetLeft)/10) //步长
var step = (target - obj.offsetLeft)/10;
step = step > 0 ? Math.ceil(step):Math.floor(step);
if(obj.offsetLeft == target){
//停止动画，本质是停止定时器
clearInterval(obj.timer)
//回调函数写道定时器里面
if(callback){
//调用函数
callback();
}
}
//把每次加1这个步长值改为一个慢慢变小的值
obj.style.left = obj.offsetLeft + step + 'px';
},15)
}
but.addEventListener('click',function(){
animate(div,500)
})
but2.addEventListener('click',function(){
animate(div,800,function(){div.style.background = 'yellow'})
})
//缓动动画原理
//让盒子每次移动的举例慢慢变小，速度就会慢慢落下来
//核心算法:(目标值-现在的位置)/10，作为每次移动的距离，步长
//停止条件：让当前盒子位置等于目标位置就停止定时器