谈Javascript如何实现匀速运动？

Javascript中的运动经常在网站上使用。这次，我想和大家分享一些运动的基本应用。方便大家在开发中直接使用。

代码简单易懂，适合初学者。最终会一步步整理出一套自己的运动框架。

应用案例渲染：

将鼠标移动到共享上，将显示左侧的div。会自行恢复。相信大家都会用这个，非常实用。让我们看看代码是如何实现的。

复制的代码如下： style type=' text/CSS ' # div 1 { width : 150 px；高度： 200 px；背景：绿色；绝对位置：left :-150 px；} # div 1 span { position : absolute；宽度： 20px；高度： 60px；线高： 20px；背景：蓝色；right :-20px；top: 70px}/样式

复制代码如下： body div id=' div 1 ' span Share to/span/div/body。

以下是Javascript代码。

复制的代码如下： script type=' text/JavaScript ' window . onload=function(){ varo div=document . getelementbyid(' div 1 ')；odiv . onmouseover=function(){ startMove(0)；};odiv . onmouseout=function(){ startMove(-150)；};} var time=null函数startMove(iTraget){ var oDiv=document . getelementbyid(' div 1 ')；clearInterval(时间)；time=setInterval(function(){ var speed=0；if(odiv . offsetleftaget){ speed=-10；} else { speed=10} if(odiv . offsetleft==iTraget){ clearInterval(time)；} else { Odiv . style . left=Odiv . offsetleft speed ' px '；} },30);}/脚本

思考：

在样式中，最初的左边是-150，所以div在内部收缩，如果给它0，它将被显示。那么我们只需要改变这个值。

startMove中的参数iTarget是目标点，它指示哪个目标点将停止。

控制速度可以控制运动速度。如果达到目标点，停止计时器。

规则：

*假设

* left:30 iTarget:300表示向右为正* left:600 iTarget:50表示向左为负* *正或负的速度可以从当前位置左侧和iTarget点之间的关系来推断。

注意：一起床就关掉定时器，因为每次移动分享的时候，都会启动一个定时器。你打开的越多，速度就会越快，因为多个定时器会同时执行。

所以要确保一次有一个计时器在工作。

遵循函数相同，参数越少越好的原则。因此，根据上述规则，速度不会作为参数传入。

举个生活中的例子：你一般不可能坐出租车，以100码的速度告诉出租车司机你去了哪里。你不能告诉主人你想坐出租车跑多快。

所以程序是一样的，这里去掉了速度参数。

当然，现在的体育框架还是会有很多问题，会陆续解决。在下一篇文章中，我们将讨论如何停止匀速运动。