溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

原生JS如何實現(xiàn)復(fù)合運動

發(fā)布時間：2021-08-25 08:53:55 來源：億速云 閱讀：126 作者：小新 欄目：開發(fā)技術(shù)

這篇文章主要介紹了原生JS如何實現(xiàn)復(fù)合運動，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

效果如下：

原生JS如何實現(xiàn)復(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 >
    <input id="btn1" type="button" value="開始運動" />
    <div id="div1"></div>
</body>
 
</html>

感謝你能夠認真閱讀完這篇文章，希望小編分享的“原生JS如何實現(xiàn)復(fù)合運動”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI
助
手