Javascript_多个对象相同运动_运动框架-CSDN博客

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<font face="Verdana, Geneva, sans-serif"></font>
<style type="text/css">    
    div{width:100px;height:100px;background:#ccc;margin-bottom:10px;}
</style>
<script type="text/javascript">
window.onload=function()
{    
    oDiv=document.getElementsByTagName("div");
    for(var i=0;i<oDiv.length;i++)
    {    oDiv[i].timer=null;   　　　　//每个对象添加一个定时器
        oDiv[i].οnmοuseοver=function(){
            Move(this,200);    
        }
        oDiv[i].onmouseout=function(){
            Move(this,100);    
        }
    }
    
}
function Move(obj,itarget)  
    {        
        clearInterval(obj.timer);
        obj.timer=setInterval(function(){
            speed=(itarget-obj.offsetWidth)/10;
            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>
</head>

<body>
    
        <div id="div1"></div>
        <div id="div2"></div> 
        <div id="div3"></div>
        <div id="div4"></div>      
   
</body>
</html>