web前端之js实现链式运动_链式 web-CSDN博客

本文链接：https://blog.csdn.net/OrdnAry/article/details/108305374

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{width: 100px; height: 100px; background-color: red; margin: 20px; opacity: 0.3; filter: alpha(opacity=30);} 
    </style>
    <script>
        window.onload = function(){
            var odiv = document.getElementsByTagName("div");

            odiv[0].onmouseover = function(){
                odiv[0].alpha = 30;
                Move(this,"width",300,function(){
                    Move(this,"height",300,function(){
                        Move(this,"opacity",100);
                    });
                });
            }
            odiv[0].onmouseout = function(){
                Move(this,"opacity",30,function(){
                    Move(this,"height",100,function(){
                        Move(this,"width",100);
                    });
                });
            }
        }
        function Move(node,attr,iTarget,complete){
            // var odiv = document.getElementsByTagName("div");
            clearInterval(node.timer);
            node.timer = setInterval(function(){
                var iCur = null;
                if(attr == "opacity"){
                        iCur = parseInt(parseFloat(getStyle(node, "opacity")) * 100);
                    }else{
                        iCur = parseInt(getStyle(node, attr))
                    }
                var speed =(iTarget - iCur) /8;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                if(iCur == iTarget){
                    clearInterval(node.timer);
                    if(complete){
                            complete.call(node);
                        }
                }else{
                    if(attr == "opacity"){
                        node.alpha += speed;
                        node.style.opacity = node.alpha /100;
                        node.style.filter = "alpha(opacity="+ node.alpha +");";
                    }else{
                        node.style[attr] = iCur +speed +"px";
                    }
                }
            },50);
        }
        function getStyle(node, cssStr){
                return node.currentStyle ? node.currentStyle[cssStr] : getComputedStyle(node)[cssStr];
            }
    </script>
</head>
<body>
    <div></div>
</body>
</html>