JavaScript动画之多属性链式动画-变宽-变高-改变透明度

280 查看
效果图
图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <!-- <link rel="stylesheet" type="text/css" href="../css/demo2.css">
    <script src="../js/move.js"></script>
    <script src="../js/demo2.js"></script> -->
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: #e52325;
            opacity: 0.3;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var box = document.getElementById('box');
            box.onmouseover=function(){
                startMove(box,'width',400,function(){
                    startMove(box,'height',400,function(){
                        startMove(box,'opacity',100);
                    });
                });
            };
            box.onmouseout=function(){
                startMove(box,'opacity',30,function(){
                    startMove(box,'height',200,function(){
                        startMove(box,'width',200);
                    });
                });
            };
        };
        function startMove(obj,attr,oTarget,fn){
            var incur,flag,speed;
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                if(attr==='opacity'){
                    incur = Math.round(parseFloat(getComputedStyle(obj,null)[attr])*100);
                }else{
                    incur = parseInt(getComputedStyle(obj,null)[attr]);
                }
                flag = oTarget - incur;
                speed = flag>0?Math.ceil(flag/10):Math.floor(flag/10);
                if(attr==='opacity'){
                    obj.style[attr] = (incur + speed)/100;
                }else{
                    obj.style[attr] = incur + speed + "px";
                }
                if(incur===oTarget){
                    clearInterval(obj.timer);
                    if(fn){
                        fn();
                    }
                }
            },30);
        }
    </script>
</head>
<body>
    <div id="box"></div>
</body>
</html>