标签：style io os ar java sp div on art
***************************匀速运动 1****************************************
<!DOCTYPE html>
<html></script>
***************************匀速运动 2****************************************
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{margin:0;padding:0;}
div{width:100px;height:100px;background:red;position: absolute;left:0;}
span{width:0;height:600px;position:fixed;left:600px;top:0;border-left:1px solid red;}
</style>
</head>
<body>
<input type="button" value="buttons" onclick="startMove()"/>
<div></div>
<span></span>
</body>
</html>
<script type="text/javascript">
var timer=null; //定时器需放在函数外面，避免每次调用都开启一个
function startMove()
{
var oDiv=document.getElementsByTagName("div")[0];
clearInterval(timer);//移出所有的定时器，解决了每次点击都开启一个定时器的问题
timer=setInterval(function(){
var Speed=10;
if(oDiv.offsetLeft>=600){clearInterval(timer);} //已经到达,匀速运动if里面的条件必须为>=
else{oDiv.style.left=oDiv.offsetLeft+Speed+"px";}//未到达
},30)
}
</script>
***************************匀速运动 3****************************************
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{margin:0;padding:0;}
div{width:100px;height:100px;background:red;position: absolute;left:0;}
span{width:0;height:600px;position:fixed;left:600px;top:0;border-left:1px solid red;}
</style>
</head>
<body>
<input type="button" value="buttons" onclick="startMove(600)"/>
<div></div>
<span></span>
</body>
</html>
<script type="text/javascript">
var timer=null; //定时器需放在函数外面，避免每次调用都开启一个
function startMove(itarget)
{
var oDiv=document.getElementsByTagName("div")[0];
clearInterval(timer);//移出所有的定时器，解决了每次点击都开启一个定时器的问题
timer=setInterval(function(){
var Speed=10;
if((itarget-oDiv.offsetLeft)<Speed)//如果不足够再次运行一次定时器的距离的时候 就停止，当然>=也是一个停止条件，常见的有两种停止条件
{
oDiv.offsetLeft=itarget;
clearInterval(timer);
}
else{oDiv.style.left=oDiv.offsetLeft+Speed+"px";}//未到达
},30)
}
</script>
标签：style io os ar java sp div on art
原文地址：http://blog.csdn.net/xiaomogg/article/details/40348349
