一、运动框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>运动</title>
<style type="text/css">
#div1{width:100px;height:100px;position:absolute;background: red;left:0;top:50px;}
</style>
<script type="text/javascript">
var timer=null;
function startMove()
{
var oDiv=document.getElementById('div1');
clearInterval(timer);//防止点击重复开定时器时物体运动加快
timer=setInterval(function(){
var iSpeed=7;
if(oDiv.offsetLeft>=300)//移动300像素时停止(当iSpeed=7 oDiv.offsetLeft==300 时不会停止移动是由于300不能整除7)
{
clearInterval(timer);//到达300像素执行
}
else
{
oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';//到达300像素之前执行
}},30);
}
</script>
</head>
<body>
<input type="button" value="开始运动" onclick="startMove()"/>
<div id="div1"></div>
</body>
</html>
二、匀速运动
<meta charset="utf-8">
<title>运动</title>
<style type="text/css">
#div1{width:100px;height:100px;position:absolute;background: red;left:500px;top:50px;}
</style>
<script type="text/javascript">
var timer=null;
function startMove(iTarget)
{
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
var iSpeed=0;
if(oDiv.offsetLeft<iTarget)
{
iSpeed=7;
}
else
{
iSpeed=-7;
}
if(Math.abs(oDiv.offsetLeft-iTarget)<7)//两个之间的距离已经足够近，连一次运动都完不成了
{
clearInterval(timer);//达到终点
oDiv.style.left=iTarget+'px';
}
else
{
oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';//到达终点之前执行
}},30);
}
</script>
</head>
<body>
<input type="button" value="开始运动" onclick="startMove(300)"/>
<div id="div1"></div>
<span style="width: 1px;height:300px;background: black;position: absolute;left: 300px;top:0;"></span>
</body>
</html>
三、缓冲运动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>运动</title>
<style type="text/css">
#div1{width:100px;height:100px;position:absolute;background: red;left:0;top:50px;}
</style>
<script type="text/javascript">
var timer=null;
function startMove(iTarget)
{
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
var iSpeed=(iTarget-oDiv.offsetLeft)/8;
if(oDiv.offsetLeft>=iTarget)
{
clearInterval(timer);
}
else
{
oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
// txt1.value+=iSpeed+'\n';
}},30);
}
</script>
</head>
<body>
<input type="button" value="开始运动" onclick="startMove(300)"/>
<div id="div1"></div>
<!--
<textarea id="txt1" rows="10" cols="40"> </textarea>
-->
</body>
</html>
