hello,我是沐晴，一个充满了才华，却靠了照骗走江湖的前端妹子。在这个充满PS的年代，这你们都信，哈哈，废话不多说，今天要分享的是关注JS运动的知识。楼主一直认为，不管学习什么，核心思想才是王道，掌握了思想，不管需求怎么改变，我们都能把它玩弄于股掌之中。。。下面我们就进入运动的世界吧。

        首先来看最基础的运动：单个物体向右匀速运动到某一点停止

       例子：一个按钮，一个div,点击按钮，让div向右运动到某一个位置暂停  

// 原理： 1 获取物体当前的位置 oDiv.offsetleft // 2 利用定时器，每隔一定的时间，让物体位置增加相同的距离（10px）。 // 3 判断物体是否移动到指定位置（500px）,如果到达，就清除定时器 var oBtn = document.getElementById('btn'); var oDiv = document.getElementById('div1'); var iTimer = null; oBtn.onclick = function() { iTimer = setInterval(function() { if (oDiv.offsetLeft == 500) { clearInterval(iTimer); } else { oDiv.style.left = oDiv.offsetLeft + 10 + 'px'; } }, 30); } // 存在问题： 1 当我们一直不停的点按钮的时候，物体运动速度会加快。 // 原因：我们每点击一次按钮，就会开启一个定时器，有时候上次定时器还没清除， 这个就开启了，当多个定时器一起物体运动就会加快。 // 解决： 在点击按钮的时候，先清除上次的定时器。保证运动中，只有一个定时器在执行。 // 2 当我们指定的位置不是500,是别的位置的时候，有可能物体停不下来。 // 原因：物体每次向前移动10px,不一定就正好到我们指定的位置，除非这个数字刚好整 除每次移动的距离。其实也不算是个问题，但是个需要注意的点。 // 解决：在作条件判断的时候，判断范围，而不是指定的位置。(oDiv.offsetLeft >= 500)

所以我们可以知道运动需要注意：1 运动前清除上次定时器

                                              2 开启定时器，指向运动

                                              3  运动中指定运动的形式（匀速缓存还是什么的），并且加入条件判断，以便停止

封装函数：对于以上运动的改进代码，我就不做具体的示范了，我们直接来进行简单的封装。在封装函数中顺便改进上面的函数了。

var oBtn = document.getElementById('btn'); var oDiv = document.getElementById('div1'); var iTimer = null; oBtn.onclick = function() { startMove(); } startMove() { clearInterval(iTimer); //运动前清除定时器 iTimer = setInterval(function() { if (oDiv.offsetLeft == 500) { clearInterval(iTimer); //满足条件清除定时器 } else { oDiv.style.left = oDiv.offsetLeft + 10 + 'px'; //每次向前移动 } }, 30); }

扩展需求1：根据上面的函数我们可以实现，一个物体向右运动到某一个位置。那么我们现在如果有两个物体，一个向左运动，一个向右运动，且运动的目的地是不同的，那么上面的函数是不是就不满足了呢？

改进：多物体多方向运动

// 函数封装原则： 1 不变的不动 // 2 改变的东西作为参数 // oDiv1.onmouseover = function() { startMove(this,0, 10); } oDiv1.onmouseout = function() { startMove(this,-100, -10); } function startMove(obj, iTarget, iSpeed) { clearInterval(iTimer); iTimer = setInterval(function() { if (obj.offsetLeft == iTarget) { clearInterval(iTimer); } else { obj.style.left = obj.offsetLeft + iSpeed + 'px'; } }, 30); }

扩大需求2：现在我们不仅仅改变的是物体左右移动，我们想让一个物体的透明度也能改变。能作出淡入淡出的效果。

存在的问题是：

   问题1 ： 在css中，不同浏览器对透明度的设置方式不同。

IE： filter: alpha(opacity=30);（0-100） 其他： opacity: 0.3;（0-1） // 所以存在的问题是：用哪种方式来判断透明度是否到达我们所指定的目标，是用0-1，还是0-100来判断呢？

在这里要普及一个知识 ： alert(0.1+0.2) // 0.30000004 alert(0.2+0.7)

  问题2 ：如何获取到物体的透明度，用obj.style.opacity 吗？