javascript - 请问如何通过这种方法给多个物体加上链式运动-PHP中文网问答

我知道可以通过给多个物体分别加上不同的ID，然后通过ID来加上事件，那能不能改善我的方法使之可行呢？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        ul li{
            width: 200px;
            height: 100px;
            background-color: blue;
            list-style-type: none;
            margin:20px 0;
            cursor: pointer;
            filter: alpha(opacity:20);
            opacity: 0.2;
            border:4px solid #000;
        }
    </style>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script type="text/javascript">
window.onload=function(){
        var lis=document.getElementsByTagName("li");
        for(var i=0;i<lis.length;i++){
            lis[i].timer=null;
            lis[i].alpha=20;
            lis[i].onmouseover=function(){
                move(lis[i],'opacity',100,function(){
                    move(lis[i],'width',300);

                });
            

            }
            lis[i].onmouseout=function(){
                move(lis[i],'opacity',20,function(){
                    move(lis[i],'width',200);
                });
                
            }
        }

        
        function move(obj,attr,target,fn){
            clearInterval(obj.timer);
            obj.timer=setInterval(function(){
                var icur=0;
                if(attr=='opacity'){
                    icur=parseFloat(getStyle(obj,attr))*100;
                }
                else{
                    icur=parseInt(getStyle(obj,attr));
                }
                var speed=(target-icur)/5;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);

                if(target==icur){    //检测停止
                    clearInterval(obj.timer);
                    if(fn){
                        fn();    //检测是否有回调函数
                    }
                }else{
                    if(attr=='opacity'){
                        obj.style.filter="alpha(opacity:'+(icur+speed)+')";
                        obj.style.opacity=(icur+speed)/100;
                    }
                    else{
                        obj.style[attr]=icur+speed+'px';
                    }
                    
                    
                }
            },30)
        }
        function getStyle(obj,attr){
            if(obj.currentStyle){  //兼容IE
                return obj.currentStyle[attr];        
            }else{
                return getComputedStyle(obj,false)[attr]; //兼容火狐

            }
        }
        


    }
</script>
</body>
</html>

for (var i = 0; i < lis.length; i++) { lis[i].timer = null; lis[i].alpha = 20; lis[i].onmouseover = function(ev) { move(ev.target, 'opacity', 100, function() { move(ev.target, 'width', 300); }); } lis[i].onmouseout = function(ev) { move(ev.target, 'opacity', 20, function() { move(ev.target, 'width', 200); }); } }