JS运动框架的封装过程(实例代码

信息有哪些呢？

第一个，总时长是:1000毫秒

第二个，多久时间走一次？30毫秒

第三个，走的总次数:1000/30

第四个，距离:B-A

第五个，步长：距离/总次数

运动框架的实现思路：就是在一定的时间段里面改变left、top、width、height，到达目的地之后停止。

可以先思考一下，在页面里如何让div动起来？

思考如下：1、设置div的时候为绝对定位，因为只有绝对定位之后，left、top等值才会在页面上显示出来。否则在页面上看不见div。

2、可以给div设置点击事件，在函数里面定义总的步数count，总距离dis，速度step=dis/count,还需要设置一个当前的步数，给它进行初始化n=0

3、然后使用计时器setInterval（），获取到div当前的距离，让他div动起来。

具体代码如下：

<script type="text/javascript">

window.onload = function(){
var oDiv = document.getElementById('div1');
oDiv.onclick = function(){
var count = parseInt(1000/30);//走的总步数
var dis = 500-0;//距离
var step = dis/count;//
var n = 0；//当前的步数

timer = setInterval(function(){
n++;
oDiv.style.left = n*step + 'px';
},30)
}
}
</script>

其实让div动起来很简单，就这么几行代码div就会动起来了。

但是呢div他不会停下来，一直在运动，那是因为没有给它设置运动终止条件。在上面代码中我们已经设置了当前的步数，也设置了总步数，那么当当前步数和总步数一致的时候，然后清除计时器，那么div是不是就可以停止了呢？

当步数达到500的时候，div就会停到500那块。

改善后的代码如下:

window.onload = function(){

var oDiv = document.getElementById('div1');
var timer;
oDiv.onclick = function(){
var count = parseInt(1000/30);//走的总步数
var dis = 500-0;//距离
var step = dis/count;//速度
var n = 0;//当前的步数
timer = setInterval(function(){
n++;
oDiv.style.left = n*step +'px';

//判断条件，当前步数和总步数一致的时候，那么div就可以停止了 if(n == count){
clearInterval(timer)
};
},30)
}
}
</script>

我们可以用函数把运动的过程给封装起来

<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
var timer;

obj是获取的对象，name是div的Left、Top、Width、Height值，target是最终的目的地，dur是总时长
function move(obj,name,target,dur){
var count = parseInt(dur/30);
var start = obj.offsetLeft;//把div刚开始在页面上的位置存在变量中
var dis = target - start;//dis为距离
var step = dis/count;
var n = 0;
timer = setInterval(function(){
n++;
obj.style[name] = start+ n*step +'px';

//判断条件，当前步数和总步数一致的时候，那么div就可以停止了
if(n == count){
clearInterval(timer)
}
},30)
}
oDiv.onclick = function(){
move(oDiv,'top',100,1000)
}
}
</script>

精彩内容待续...

以上就是JS运动框架的封装过程(实例代码的详细内容，更多请关注Gxl网其它相关文章！