关于多物体--->透明度-原创手记-慕课网

多物体运动争抢资源问题
如果设置了一个公用的资源，多物体事件会争抢，如设置了一个公共定时器，都触发了就会抢夺，产生混乱，所以最好为每个物体设置定时器后者设置初始透明度
oDIv[i].timer = null;oDiv[i].alpha = 30;等等

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>透明度动画</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        div {
            width:300px;
            height:100px;
            background:red;
            margin-bottom: 10px;
            filter:Alpha(Opacity=30);
            opacity:0.3;
        }
    </style>
    <script>
        window.onload = function(){
            var oDiv = document.getElementsByTagName('div');
            for(var i=0;i<oDiv.length;i++){
              //  oDiv.timer=null;
               oDiv[i].alpha=30;
                oDiv[i].onmouseover=function(){
                    startMove(this,100);
                }
                oDiv[i].onmouseout=function(){
                    startMove(this,30);
                }
            }
        }
        //var alpha=30;只要是多物体运动，所有的东西他都不能公用

        function startMove(ob,iTarget){

            clearInterval( ob.timer);

            var speed=0;
            if(ob.alpha>iTarget){
                speed=-10;
            }
            else{
                speed=10;
            }
            ob.timer = setInterval(function(){
                if(ob.alpha==iTarget){
                    clearInterval(ob.timer);
                }
             else{
                    ob.alpha+=speed;
                    ob.style.filter='alpha(opacity:'+ob.alpha +')';
                    ob.style.opacity=ob.alpha/100;

                }
            },30)
        }
    </script>
</head>

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