自己封裝簡單的運(yùn)動(dòng)效果

/**
 * 運(yùn)動(dòng)函數(shù)簡單封裝
 * @param obj   要操作的對(duì)象
 * @param json  存放要改變的屬性和目標(biāo)值
 * @param fn    回調(diào)函數(shù),在前面的運(yùn)動(dòng)效果執(zhí)行完之后,才回執(zhí)行的函數(shù)
 */
function motion(obj, json,fn) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        // 當(dāng)開關(guān)變量結(jié)果為true時(shí),表示所有動(dòng)作執(zhí)行完畢,可以停止定時(shí)器,調(diào)用回調(diào)函數(shù)了
        var onOff = true;
        for ( var attr in json ){
            var current = null;
            // 獲取當(dāng)前值
            if (attr = "opacity") {
                current = parseInt(getStyle(obj, attr)) * 100;
            } else {
                current = parseInt(getStyle(obj, attr));
            };
            // 計(jì)算速度
            var speed = ( json[attr] - current ) / 7;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            // 如果目標(biāo)值和當(dāng)前值不相等  繼續(xù)for循環(huán)
            if (json[attr] != current) {
                flag = false;
            };
            if (attr = "opacity") {
                obj.style.opacity = ( current + speed ) / 100;
                obj.style.filter = "alpha(opacity = " + ( current + speed ) + ")";
            } else if (attr == "zIndex"){
                obj.style.zIndex = json[attr];
            }else {
                obj.style[attr] = current + speed + "px";
            };
        };
        // 判斷開關(guān)變量的停止條件
        if( onOff ){
            clearInterval(obj.timer);
            if (fn) {
                fn();
            };
        };
    }, 50);};
/**
 * 獲取非行內(nèi)CSS樣式
 * @param obj   要獲取的對(duì)象
 * @param attr  要獲取的屬性
 * @returns {Number}
 */
function getStyle(obj, attr) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(obj.false)[attr];
    } else {
        return obj.currentStyle[attr];
    };
};
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容