startMoveCase

<!DOCTYPE html>
<html>

<head>
    <title>startMoveCase</title>
    <script>
        function geyStyle(name, arrt) {
            if (name.currentStyle) {
                return name.currentStyle[arrt];
            } else {
                return getComputedStyle(name, false)[arrt];
            }
        }

        function startMove(name, json, end) {
            clearInterval(name.timer);
            var stop=true;
            name.timer = setInterval(function () {
                for (const arrt in json) {
                    var cur = 0;
                    if (arrt == 'opacity') {
                        cur = cur = Math.round(parseFloat(geyStyle(name, arrt)) * 100);
                    } else {
                        cur = parseInt(geyStyle(name, arrt));
                    }

                    var spead;

                    spead = (json[arrt] - cur) / 10;
                    spead = spead > 0 ? Math.ceil(spead) : Math.floor(spead);

                    if (cur != json[arrt]) {
                        stop=false;
                        if (arrt == 'opacity') {
                            name.style[arrt] = (cur + spead) / 100;
                        } else {
                            name.style[arrt] = cur + spead + 'px';
                        }
                    }
                }
                if(stop==true){
                    clearInterval(name.timer);
                    if (arrt == 'opacity') {
                        name.style[arrt] = json[arrt] / 100;
                    } else {
                        name.style[arrt] = json[arrt] + 'px';
                    }
                    if (end) end();
                }
            }, 17);
        }
        window.onload = function () {
            var oDiv = document.getElementById('div1');
            oDiv.onmouseover = function () {
                startMove(oDiv, { width: 140, height: 400, opacity: 40 });
            }

            oDiv.onmouseout = function () {
                startMove(oDiv, { width: 100, height: 100, opacity: 100 });
            }
        }
    </script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    div {
        width: 100px;
        height: 100px;
        background: red;
    }
</style>

<body>
    <div id="div1"></div>
</body>

</html>
startMoveCase

推荐阅读更多精彩内容
