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，作为每次移动的距离，步长
//停止条件：让当前盒子位置等于目标位置就停止定时器

要想让盒子运动起来，并且速度还是慢慢变慢的，最重要的就是获取步长，就是让盒子要到达的距离减去盒子此时正处的位置，然后再除一个数，就可以算出步长了

还要判断步长是大于0还是小于0：step = step > 0 ? Math.ceil(step):Math.floor(step); 这个三元表达式就是判断的依据，如果大于0，就向上取整，盒子向右运动；如果小于0，向下取整，盒子向左运动

第三步：打开定时器

第四步:判断盒子实时的位置，如果盒子的位置等于指定为止，就停止定时器

第五步:obj.style.left = obj.offsetLeft + step + 'px';

  鼠标实时所处的位置加上每次的位置就能让盒子运动起来了，但是一定要加上px，因为offsetLeft和step的值都是没有单位的

注意：①步长值要写到定时器里面

           ②把步长值改为整数，不要出现小数

           ③开定时器之前，将上一个定时器关掉

最后

以上就是甜美大白为你收集整理的js运动框架封装函数的全部内容，希望文章能够帮你解决js运动框架封装函数所遇到的程序开发问题。

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