欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2021年08月23日 16:28:08   作者:aiguangyuan  
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)各種運動之復合運動,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

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

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

<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS實現(xiàn)各種運動之復合運動</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)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 代碼生成器 document.write()

    代碼生成器 document.write()

    代碼生成器 document.write()...
    2007-04-04
  • javascript 分號總結(jié)及詳細介紹

    javascript 分號總結(jié)及詳細介紹

    這篇文章主要介紹了javascript 分號總結(jié)及詳細介紹的相關(guān)資料,需要的朋友可以參考下
    2016-09-09
  • JS常用算法實現(xiàn)代碼

    JS常用算法實現(xiàn)代碼

    這篇文章主要為大家詳細介紹了用JS常用幾個算法的實現(xiàn)代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-11-11
  • webpack常用配置項配置文件介紹

    webpack常用配置項配置文件介紹

    這篇文章主要為大家詳細介紹了webpack常用配置項配置文件,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-11-11
  • JavaScript遞歸函數(shù)定義與用法實例分析

    JavaScript遞歸函數(shù)定義與用法實例分析

    這篇文章主要介紹了JavaScript遞歸函數(shù)定義與用法,結(jié)合實例形式分析了javascript遞歸的原理、函數(shù)定義、使用方法及操作注意事項,需要的朋友可以參考下
    2019-01-01
  • 淺析如何在Bash中調(diào)用Node運行JS文件進行數(shù)據(jù)通信

    淺析如何在Bash中調(diào)用Node運行JS文件進行數(shù)據(jù)通信

    這篇文章主要來和大家探討在 Bash 中調(diào)用 Node 運行 JS 文件時如何進行數(shù)據(jù)通信,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
    2024-03-03
  • JS正則匹配URL網(wǎng)址的方法(可匹配www,http開頭的一切網(wǎng)址)

    JS正則匹配URL網(wǎng)址的方法(可匹配www,http開頭的一切網(wǎng)址)

    這篇文章主要介紹了JS正則匹配URL網(wǎng)址的方法,可實現(xiàn)匹配www,http開頭的一切網(wǎng)址的功能,涉及JS正則匹配字符串、數(shù)字及特殊字符構(gòu)建URL的操作技巧,需要的朋友可以參考下
    2017-01-01
  • Javascript中數(shù)組去重與拍平的方法示例

    Javascript中數(shù)組去重與拍平的方法示例

    這篇文章主要介紹了Javascript中數(shù)組去重與拍平的相關(guān)資料,因為這是實際業(yè)務(wù)開發(fā)中經(jīng)常遇到的,文中開始先進行了數(shù)組的判斷介紹,因為在處理數(shù)組之前判斷數(shù)據(jù)是不是數(shù)組很重要,有需要的朋友可以參考借鑒,下面來一起看看吧。
    2017-02-02
  • 基于JS編寫開心消消樂游戲的示例代碼

    基于JS編寫開心消消樂游戲的示例代碼

    這篇文章主要為大家介紹了如何利用JavaScript實現(xiàn)開心消消樂小游戲,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-06-06
  • Javascript實現(xiàn)的簡單右鍵菜單類

    Javascript實現(xiàn)的簡單右鍵菜單類

    這篇文章主要介紹了Javascript實現(xiàn)的簡單右鍵菜單類,通過JavaScript自定義類實現(xiàn)右鍵菜單功能,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-09-09

最新評論