1.匀速运动（速度不变）
运动的简单实现
运动: 顾名思义 就是让物体动起来!到达你想要的效果 或者说想要的位置。
我想让一个方块（DIV）动起来 并且到达一个指定的位置 。怎么让一个DIV 动起来 这时候就用到setInterval（）函数 也就是定时器。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div {width:100px; height:100px; position:absolute; background:yellow; left:0; top:50px;}
</style>
<script>
function startMove()
{
var Div=document.getElementById('div');
setInterval(function (){
Div.style.left=Div.offsetLeft+10+'px';
}, 30);
}
</script>
</head>
<body>
<input type="button" value="开始运动" onclick="startMove()">
<div id="div"></div>
</body>
</html>
但是运行起来 你发现他并不会停 因为本来就没有让他停想要让div停 只要关掉定时器就行 但是前提是你要让div停在你想要的位置上比如说 当div运动到300px的时候在停下
var timer=null;
function startMove()
{
var Div=document.getElementById('div');
timer=setInterval(function (){
if(Div.offsetLeft>=300)//判断运动是否到达终点
{
clearInterval(timer);//关掉定时器
}
Div.style.left=Div.offsetLeft+10+'px';
}, 30);
}
这里我们div的offsetleft大于等于300而不是等于300 是因为 当速度不正好是你运动距离的整除数 还是不会停止 避免这类情况发生
好吧看似这个简单的div运动应该没问题了但是 当物体已经运动到终点时 再点击按钮开始运动 你会发现div还是会动一下在停止 这又是为什么呢
Div.style.left=Div.offsetLeft+10+'px';
让我们来看看这段代码的意思让物体以10px的速度在运动 所以 这应该是物体没到达终点之前 应该做的事情吧
clearInterval(timer);//关掉定时器
而关掉定时器是到达终点做的事情 好像有点自相矛盾了呢 这里我们得加个else 语句意思就是 如果到达终点 关掉定时器 没有
则继续运动。
var timer=null;
function startMove()
{
var Div=document.getElementById('div');
timer=setInterval(function (){
if(Div.offsetLeft>=300)//判断运动是否到达终点
{
clearInterval(timer);//关掉定时器
}else{
Div.style.left=Div.offsetLeft+10+'px';
}
}, 30);
}
这总归没问题了吧 好吧手贱的我 物体（div）还没到达终点时 又多点了几下开始运动，惊奇的发现速度变快了 这是为什么呢
其实呢 还是定时器 的问题的 因为你还没到终点时没点一下 就会产生一个定时器 速度 自然而然快了 就好比做项目一个人做又累又慢 哎 公司又招了2个前端 工作量明显减少不少。
解决办法的就是在开启定时器之前关闭所有定时器
clearInterval(timer);
总结一下 让物体运动动起来的问题
- 怎么停止（关闭定时器）
- 到达终点再次点击还会运动
- 没到达终点再次点击速度加快
实现分享到运动的例子
如图一样的效果:
其实好吧我在好多博客网站看到过。
如何实现呢 把复杂的东西先简单化 当鼠标移动到分享到按钮时div的offset运动到指定位置
鼠标移开div的offset又回到初始位置
起初我会这么写
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>分享到</title>
<style>
#div {width:100px; height:200px; background:#CCC; position:absolute; left:-100px;}
#div span {width:20px; height:60px; line-height:20px; text-align:center; left:100px; top:70px; background:yellow; position:absolute;}
</style>
<script>
window.onload=function ()
{
var Div=document.getElementById('div');
Div.onmouseover=function ()
{
startMove();
}
Div.onmouseout=function ()
{
startMove2();
}
}
var timer=null;
function startMove()
{
var Div=document.getElementById('div');
clearInterval(timer);
timer=setInterval(function (){
var iSpeed=10;
if(Div.offsetLeft==0)
{
clearInterval(timer);
}
else
{
Div.style.left=Div.offsetLeft+iSpeed+'px';
}
}, 30);
}
function startMove2()
{
var Div=document.getElementById('div');
clearInterval(timer);
timer=setInterval(function (){
var iSpeed=-10;
if(Div.offsetLeft==-100)
{
clearInterval(timer);
}
else
{
Div.style.left=Div.offsetLeft+iSpeed+'px';
}
}, 30);
}
</script>
</head>
<body>
<div id="div">
<span>分享到</span>
</div>
</body>
</html>
好吧看起来没问题效果也实现但是代码有点过多 需要优化
如何解决这个问题
startMove()和startMove2()函数 根本上就是两个基本上一样的函数
不同的是终点值 所以需要合并一下 我们只要把终点值当参数传递
就可以了 javascript代码：
window.onload=function ()
{
var Div=document.getElementById('div');
Div.onmouseover=function ()
{
startMove(0);
}
Div.onmouseout=function ()
{
startMove(-100);
}
}
var timer=null;
function startMove(iTarget)
{
var Div=document.getElementById('div');
clearInterval(timer);
timer=setInterval(function (){
var iSpeed=0;
if(Div.offsetLeft<iTarget) //物体offsetleft值没到达终点值
{
iSpeed=10; //速度为正
}else
{
iSpeed=-10; //否则速度为负
}
if(Div.offsetLeft==iTarget)
{
clearInterval(timer);
}else
{
Div.style.left=Div.offsetLeft+iSpeed+'px';
}
}, 30);
}
2.缓冲运动
原理：速度有快到慢， 当到达目标点时 运动停止。也就是说速度是由距离决定的
物体与目标点距离越大，速度越大 物体与目标点距离越小，速度越小。
速度公式：（目标值-物体当前距离）/缩放系数
javascript代码
var timer=null;
function startMove(iTarget)
{
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function (){
var iSpeed=(iTarget-oDiv.offsetLeft)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); //速度取整 如果不是整数 到达目标点就会有误差
if(oDiv.offsetLeft==iTarget)//是否到达终点
{
clearInterval(timer); //到达终点
}else
{
oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';//到达之前
}
document.title=oDiv.offsetLeft+',speed='+iSpeed;
}, 30);
}
3.多物体同时体运动
多物体同时运动的问题是，需要在在每个物体的加个定时器 不然当一个物体运动还没有结束其他物体继续运动 就会卡在那 这是共用一个定时器的后果。因为是多个物体 所以我们得给运动函数 加个物体（obj）参数。
//多个DIV 变宽
window.onload=function ()
{
var aDiv=document.getElementsByTagName('div');
var i=0;
for(i=0;i<aDiv.length;i++)
{
aDiv[i].timer=null;
aDiv[i].onmouseover=function ()
{
startMove(this, 300 ); //当前鼠标移入的物体
}
aDiv[i].onmouseout=function ()
{
startMove(this, 100);
}
}
}
function startMove(obj, iTarget)
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var iSpeed=(iTarget-obj.offsetWidth)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(obj.offsetWidth==iTarget)
{
clearInterval(obj.timer);
}
else
{
obj.style.width=obj.offsetWidth+iSpeed+'px';
}
}, 30)
}
网友评论