链式运动

旧城等待， 2022-07-14 11:19 166阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #div1{
                width:100px;
                height:100px;
                background-color: red;
                filter:alpha(opacity:30);
                opacity: 0.3;
            }
        </style>
        <script>
            /**
             * Created by zhanghaibin on 16/12/5.
             */
            function getStyle(obj,attr) {
                if(obj.currentStyle){
                    return obj.currentStyle[attr];
                }else{
                    return getComputedStyle(obj,false)[attr];
                }
            };
            function startMove(obj,attr,target,fn) {
                clearInterval(obj.timer);
                obj.timer=setInterval(function () {
                    var iCur=0;
                    if(attr=='opacity'){
                        iCur=parseInt(parseFloat(getStyle(obj,attr)*100));
                    }else{
                        iCur=parseInt(getStyle(obj,attr));
                    }
                    var speed=(target-iCur)/8;
                    speed=speed>0?Math.ceil(speed):Math.floor(speed);
                    if(iCur==target){
                        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)
            };
            window.onload=function(){
                var oDiv=document.getElementById('div1');
                oDiv.onmouseover=function(){
                    startMove(oDiv,'width',300,function () {
                        startMove(oDiv,'height',300,function () {
                            startMove(oDiv,'opacity',100)
                        });
                    })
                };
                oDiv.onmouseout=function(){
                    startMove(oDiv,'opacity',30,function () {
                        startMove(oDiv,'height',100,function(){
                            startMove(oDiv,'width',100);
                        })
                    })
                }
            }
        </script>
    </head>
    <body>
    <div id="div1"></div>
    </body>
    </html>