浅谈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码的速度到哪哪哪，一般是不可能的吧。打车你不可能告诉师傅你要跑多快
所以程序也是一样的，这里就把速度这个传参去掉了。
当然现在的这个运动框架还会有许多问题，在之后会陆续解决。下篇文章，我们来探讨下匀速运动如何停止。
相关文章
CascadeView级联组件实现思路详解(分离思想和单链表)
本文介绍自己最近做省市级联的类似的级联功能的实现思路，为了尽可能地做到职责分离跟表现与行为分离，这个功能拆分成了2个组件并用到了单链表来实现关键的级联逻辑，下一段有演示效果的gif图2016-04-04
数组去重复是一个常见的需求，我们暂时考虑同类型的数组去重复。主要是理清思路和考虑下性能。以下方法，网上基本都有，这里只是简单地总结一下分享给大家。2015-04-04
本文为大家介绍下如何改变隐藏的input中value的值，一句代码就可以实现，感性的朋友可以参考下2013-12-12
这篇文章将带大家深入探讨 class 在 JavaScript 中的作用、语法和使用方法，并与 ES5 构造函数进行对比，希望可以帮助大家更好地理解和应用类的概念2023-06-06
我看到过很多人不愿意去正视ajax所存在的技术瓶颈，其实AJAX更应该是Ajax而不是AJAX，突出第一个A是想强调其实AJAX发扬的是一种异步传输的方法，而不是具体到底使用了哪种技术2013-11-11
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
这篇文章主要介绍了《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法,需要的朋友可以参考下2015-01-01
利用JavaScript将普通数字转换为带有千分位分隔符格式的多种实现方法
如何利用 JavaScript 将普通数字转换为带有千分位分隔符的格式,我们将介绍多种方法,包括使用内置的 toLocaleString() 方法、Intl.NumberFormat 对象以及自定义函数来实现数字格式化,需要的朋友可以参考下2023-12-12
最近一直在努力学习DOM编程这块，这是目前成就感最强烈的一块了，毕老师很认真的给我们讲解了相关知识，并在网上找了很多做的非常棒的网页作为例程给我们进行讲解2009-11-11
这篇文章主要介绍了js实现的二分查找算法,结合实例形式较为详细的分析了JavaScript简单实现二分查找算法的运算原理与具体步骤,需要的朋友可以参考下2016-01-01
这篇文章主要介绍了JavaScript判断undefined类型的正确方法,相信很多同学在遇到这问题时都会用到错误的方法,正确方法也很简单,需要的朋友可以参考下2015-06-06
最新评论