JS匀速运动 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>匀速运动</title>
<style>
#div1{width: 200px; height: 200px; background: blue; position: absolute; top:50px; left: 0px;}
</style>
<script type="text/javascript">
var timer = null;
function StartMove()
{    
    clearInterval(timer);
    var oDiv = document.getElementById('div1');
    timer = setInterval(function(){
        var speed = 10;
        if(oDiv.offsetLeft>=300)
        {
            clearInterval(timer);
        }
        else
        {
            oDiv.style.left = oDiv.offsetLeft + speed + 'px';
        }
    },30);
}
</script>
</head>
<body>
<input type = "button" id = "btn1" value = "开始运动" onclick = "StartMove()"/>
<div id = "div1"></div>
</body>
</html>

 JS控制物体运动，关键的一步是要运动的物体样式中要设定绝对定位position: absolute，这里主要是通过定时器控制物体匀速运动，每隔30毫秒让物体运动10个像素，直到符合判断条件移动到300px的位置关闭定时器，这用CSS3动画完全能达到同样的效果。一般定时器的开和关都是成对出现的，为了避免出现问题。

posted @ 2017-01-05 14:09  萤子  阅读(159)  评论(0)    收藏  举报