快捷導(dǎo)航

原生JS實現(xiàn)各種運動之復(fù)合運動

更新時間：2021年08月23日 16:28:08 作者：aiguangyuan

這篇文章主要為大家詳細介紹了原生JS實現(xiàn)各種運動之復(fù)合運動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文給大家分享一個用原生JS實現(xiàn)的復(fù)合運動，所謂復(fù)合運動就是在同一個進間段內(nèi)不同的屬性都會發(fā)生變化，效果如下：

實現(xiàn)代碼如下，歡迎大家復(fù)制粘貼及吐槽。

<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS實現(xiàn)各種運動之復(fù)合運動</title>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            background: red;
            opacity: 0.3;
        }
    </style>
    <script>
        function getStyle(obj, attr) {
            if (obj.currentStyle) {
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj, false)[attr];
            }
        }
 
        function startMove(obj, json, fn) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                //設(shè)定開關(guān)，防止某一個值達到后其它值停止變化
                var bStop = true;
                for (var attr in json) {
                    var iCur = 0;
                    if (attr == 'opacity') {
                        iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
                    } else {
                        iCur = parseInt(getStyle(obj, attr));
                    };
                    var iSpeed = (json[attr] - iCur) / 8;
                    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                    //如果某一個值還沒有達到，bStop就為false
                    if (iCur != json[attr]) {
                        bStop = false;
                    };
                    if (attr == 'opacity') {
                        obj.style.filter = 'alpha(opacity:' + (iCur + iSpeed) + ')';
                        obj.style.opacity = (iCur + iSpeed) / 100;
                    } else {
                        obj.style[attr] = iCur + iSpeed + 'px';
                    }
                }
 
                //最后一輪循環(huán)時如果為true，才清除定時器
                if (bStop) {
                    clearInterval(obj.timer);
                    if (fn) {
                        fn();
                    }
                }
            }, 30)
        }
    </script>
    <script>
        window.onload = function () {
 
            var oBtn = document.getElementById('btn1');
            var oDiv = document.getElementById('div1');
 
            oBtn.onclick = function () {
 
                startMove(oDiv, {
                    width: 400,
                    height: 200,
                    opacity: 100
                });
            };
        };
    </script>
</head>
 
<body style="background:#0F0;">
    <input id="btn1" type="button" value="開始運動" />
    <div id="div1"></div>
</body>
 
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: