hello ,i`m vingnee

Javascript_多个对象相同运动(图片的淡入淡出)_运动框架 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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:200px;height:200px;background:red;margin:10px;float:left;filter:alpha(opacity:30);opacity:0.3;}
</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].alpha=30;
        oDiv[i].onmouseover=function(){
            Move(this,100);    
        }
        oDiv[i].onmouseout=function(){
            Move(this,30);    
        }
    }
    
}      
    function Move(obj,itarget)
    {        
        clearInterval(obj.timer);
        obj.timer=setInterval(function(){
            speed=(itarget-obj.alpha)/10;
            speed=speed>0?Math.ceil(speed):Math.floor(speed);
            
            if(obj.alpha==itarget)
            {
                clearInterval(obj.timer);
            }else{
                obj.alpha+=speed;
                obj.style.opacity=(obj.alpha)/100;
                obj.style.filter="alpha(opacity:"+obj.alpha+")";                    
            }            
        },30)    
    }    
</script>
</head>

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

 

posted @ 2013-05-09 23:41  前端开发者  阅读(179)  评论(0)    收藏  举报