奉上我的代碼！！兼容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代碼大全
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
初識jQuery基礎入門到放棄Day3——筆記整理+作業×1+經典例題×1
1.jQuery 尺寸操作 jQuery 尺寸操作包括元素寬高的獲取和設置，且不一樣的API對應不一樣的盒子模型 <body> <div></div> <script> $(function() {
JavaScript面向對象學習(part2)——筆記整理→香菇
文章目錄 一.構造函數和原型 1.對象的創建方式 1.2靜態成員和實例成員 1.2.1實例成員 1.2.2靜態成員 1.3構造函數的問題 1.4構造函數原型prototype