浅谈Javascript如何实现匀速运动
网站上会经常用到Javascript 中的运动，这次与大家分享一下一些运动的基本应用 。 方便大家在开发中能够直接使用。
代码简单易懂，适用于初学者。最后会一步一步整理出一套自己的运动框架。
应用案例效果图：
鼠标移动到分享上 ，左边的div就会显示出来。移开会自己恢复。相信这个大家都会用到 很实用，下面看看代码是如何实现的。
<style type="text/css">
#div1 {
width: 150px;
height: 200px;
background: green;
position: absolute;
left: -150px;
}
#div1 span {
position: absolute;
width: 20px;
height: 60px;
line-height: 20px;
background: blue;
right: -20px;
top: 70px;
}
</style>
<body> <div id="div1"> <span> 分享到 </span> </div> </body>
以下是Javascript 代码
<script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementById("div1"); oDiv.onmouseover=function(){ startMove(0); }; oDiv.onmouseout=function(){ startMove(-150); }; } var time=null; function startMove(iTraget){ var oDiv=document.getElementById("div1"); clearInterval(time); time=setInterval(function(){ var speed=0; if(oDiv.offsetLeft>iTraget){ speed=-10; }else{ speed=10; } if(oDiv.offsetLeft==iTraget){ clearInterval(time); }else{ oDiv.style.left=oDiv.offsetLeft+speed+'px'; } },30); } </script>
思路：
样式中初始的left是-150 这样div就是缩在里面，给0 就会显示出来。 那么我们只要变动这个值就可以了
startMove 中的参数 iTarget 是目标点 ，表示到哪个目标点会停下来。
控制speed 的大小 就能控制运动的快慢。如果达到目标点 就停止定时器 。
规律：
* 假设
* left:30 iTarget:300 得出 往右 为正
* left:600 iTarget:50 得出 往左 为负
*
* 通过当前位置left 与目标点的 关系 iTarget 推断出 速度的正负
注意： 一上来就要关了定时器，因为是每次移动到分享到，都会开个定时器，开的越多相对来说速度就越快，因为同时会有多个定时器执行。
所以每次要保证一个定时器工作。
遵循：函数功能一样，参数越少越好的原则 ，所以根据上面的规律把speed 并不是作为参数传入。
举个生活中的例子：你打车，告诉出租车司机已100码的速度到哪哪哪，一般是不可能的吧。打车你不可能告诉师傅你要跑多快
所以程序也是一样的，这里就把速度这个传参去掉了。
当然现在的这个运动框架还会有许多问题，在之后会陆续解决。下篇文章，我们来探讨下匀速运动如何停止。
-
本文向大家介绍浅谈Javascript中匀速运动的停止条件，包括了浅谈Javascript中匀速运动的停止条件的使用技巧和注意事项，需要的朋友参考一下 我们先来看下之前的匀速运动的代码，修改了速度speed后会出现怎么样的一个bug。这里加了两个标杆用于测试 其实这样的代码如果把速度改成7这种奇数，而到达目标点却是一个整数，这样就会出现未能达目标点或超过目标点来回抖动的bug 那为什么会出现这种情
-
本文向大家介绍javascript匀速运动实现方法分析，包括了javascript匀速运动实现方法分析的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了javascript匀速运动实现方法。分享给大家供大家参考，具体如下： 匀速运动步骤： 1. 清除定时器 2. 开启定时器 3. 运动是否完成：a、运动完成，清除定时器；b、运动未完成继续 匀速运动停止条件：距离足够近 Math.abs(当
-
在 JavaScript 中，作用域、上下文、闭包、函数等算是精华中的精华了。对于初级 JSer 来说，是进阶必备。对于前端攻城师来说，只有静下心来，理解了这些精华，才能写出优雅的代码。
-
本文向大家介绍浅谈Javascript实现继承的方法，包括了浅谈Javascript实现继承的方法的使用技巧和注意事项，需要的朋友参考一下 S1:js中一切皆对象，想想如果要实现对父对象属性和方法的继承，最初我们会怎样子来实现呢，考虑到原型的概念，最初我是这样来实现继承的 从上面可以看到实现对Parent的继承主要是覆写了Son的prototype,这样便把Parent的属性和方法过给了Son的原
-
本文向大家介绍浅谈SpringBoot是如何实现日志的，包括了浅谈SpringBoot是如何实现日志的的使用技巧和注意事项，需要的朋友参考一下 前言 休息日闲着无聊看了下 SpringBoot 中的日志实现，把我的理解跟大家说下。 门面模式 说到日志框架不得不说门面模式。门面模式，其核心为外部与一个子系统的通信必须通过一个统一的外观对象进行，使得子系统更易于使用。用一张图来表示门面模式的结构为：
-
本文向大家介绍vue实现匀速轮播效果，包括了vue实现匀速轮播效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了vue实现匀速轮播效果的具体代码，供大家参考，具体内容如下 不多描述了 直接代码吧 关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。