使用計時器寫了一個簡單的勻速運動。鼠標經過，勻速運動開始
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Js動畫-勻速</title>
<link rel="stylesheet" href="">
<style>
*{
margin: 0;
padding: 0;
}
.box{
position:relative;
width:150px;
height:150px;
background-color: green;
top:300px;
left:-150px;
}
.box span{
position:absolute;
right:-20px;
display:block;
width:20px;
background-color: red;
top:50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="box">
<span>勻速</span>
</div>
<script>
window.onload=function(){
var box=document.getElementsByClassName("box")[0];
box.onmouseover=function(){
startMove(box,0);
}
box.onmouseout=function(){
startMove(box,-150);
}
}
var timer=null;
function startMove(obj,target){
var speed=0;
clearInterval(timer);
timer=setInterval(function(){
if(obj.offsetLeft<target){
speed=10;
}else{
speed=-10;
}
if(obj.offsetLeft==target){
clearInterval(timer);
}else{
obj.style.left=obj.offsetLeft+speed+"px";
}
},30);
}
</script>
</body>
</html>