奉上我的代码!!兼容ie和Firefox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多物体运动</title>
<style>
ul li{list-style:none;margin:10px;width: 200px;height: 200px;background-color: green;}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var lis=document.getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
lis[i].timer=null;
lis[i].οnmοuseοver=function(){startMove(this,400);}
lis[i].οnmοuseοut=function(){startMove(this,200);}
}
function startMove(obj, iTarget){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=(iTarget-obj.offsetWidth)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.offsetWidth==iTarget){clearInterval(obj.timer);}
else{
obj.style.width=obj.offsetWidth+speed+'px';
}
},30)
}
</script>
</body>
</html>
多物体缓冲运动js代码大全
最新推荐文章于 2021-03-17 20:23:51 发布