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

给大家出一道题，从起点a走到目的地b，一共用了1000毫秒，每一次是30毫秒，请问你在这里面得到了哪些信息？

  信息有哪些呢？

   第一个，总时长是: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/<a style=" color: text-decoration:underline title="javascript" href="https://www.php.cn/zt/15724.html" target="_blank">javascript"></script>

         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；//当前的步数

ECTouch移动商城系统

ECTouch是上海商创网络科技有限公司推出的一套基于 PHP 和 MySQL 数据库构建的开源且易于使用的移动商城网店系统！应用于各种服务器平台的高效、快速和易于管理的网店解决方案，采用稳定的MVC框架开发，完美对接ecshop系统与模板堂众多模板，为中小企业提供最佳的移动电商解决方案。ECTouch程序源代码完全无加密。安装时只需将已集成的文件夹放进指定位置，通过浏览器访问一键安装，无需对已有

下载

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

其实让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 type="text/javascript"><br/> window.onload = function(){<br/> var oDiv = document.getElementById(&#39;div1&#39;);<br/> var timer;</script>

           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)
         }
 }

精彩内容待续...