<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多物体运动</title>
<style>
*{
margin:0;
padding:0;
}
div{
width:200px;
height:100px;
background:#abc;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<script>
window.onload = function(){
var iDiv = document.getElementsByTagName("div");
for(var i = 0 ;i < iDiv.length;i++){
iDiv[i].onmouseover = function(){
startMove(this,400);
};
iDiv[i].onmouseout = function(){
startMove(this,200);
};
}
};
function startMove(obj,destination){
clearInterval(obj.timer); //将此处改为 obj.timer = null；为什么运行之后在为到达目的地时候鼠标移除div会抽搐
obj.timer = setInterval(function(){
var speed = (destination - obj.offsetWidth)/8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(destination == obj.offsetWidth){
clearInterval(obj.timer);
}else{
obj.style.width = obj.offsetWidth + speed +"px";
}
},30);
}
</script>
</body>
</html>
慕瓜9220888
qq_冲哥_0
相关分类