快捷導(dǎo)航

JavaScript實(shí)現(xiàn)彈性導(dǎo)航效果

更新時(shí)間：2021年11月07日 16:04:21 作者：小白小白從不日白

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)彈性導(dǎo)航效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)彈性導(dǎo)航效果的具體代碼，供大家參考，具體內(nèi)容如下

主要利用offsetX

1.先搭架子：

* {
      margin: 0;
      padding: 0;
        }
        
        .nav {
            width: 900px;
            height: 63px;
            background: url(images/doubleOne.png) no-repeat right center;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }
        
        ul {
            position: relative;
            z-index: 999;
        }
        
        ul>li {
            list-style: none;
            float: left;
            width: 88px;
            height: 63px;
            line-height: 63px;
            text-align: center;
        }
        
        span {
            display: inline-block;
            width: 88px;
            height: 63px;
            background: url("images/tMall.png") no-repeat;
            position: absolute;
            left: 0;
            top: 0;
}

<div class="nav">
        <ul>
            <li>雙11狂歡</li>
            <li>服裝會(huì)場(chǎng)</li>
            <li>數(shù)碼家電</li>
            <li>家居建材</li>
            <li>母嬰童裝</li>
            <li>手機(jī)會(huì)場(chǎng)</li>
            <li>美妝會(huì)場(chǎng)</li>
            <li>進(jìn)口會(huì)場(chǎng)</li>
            <li>飛豬旅行</li>
        </ul>
        <span></span>
</div>

2.編寫邏輯部分

//1.拿到需要操作的元素
const oItems = document.querySelectorAll("li");
 let oSpan = document.querySelector("span");
 
//2.監(jiān)聽每個(gè)菜單的點(diǎn)擊事件
for (let i = 0; i < oItems.length; i++) {
            let item = oItems[i];
            item.onclick = function() {
                //offsetLeft 得到被點(diǎn)擊的元素距離第一個(gè)定位祖先元素的偏移位
                // console.log(this.offsetLeft);
                // oSpan.style.left = this.offsetLeft + 'px';
                //調(diào)用函數(shù)
                easeAnimation(oSpan, {
                    "left": this.offsetLeft
                });
            };
        }

animation.js

(function() {
    /**
     * 勻速動(dòng)畫
     * @param {*} ele 執(zhí)行動(dòng)畫元素
     * @param {*} obj 該元素的哪些屬性需要執(zhí)行動(dòng)畫
     * @param {*} fn  動(dòng)畫執(zhí)行完成后可能還需要執(zhí)行的操作
     * 
     * 調(diào)用方式參考
     * linearAnimation(oDiv, {
                "marginTop": 500,
                "marginLeft": 300
        });
     */
    function linearAnimation(ele, obj, fn) {
        clearInterval(ele.timerId);
        ele.timerId = setInterval(function() {
            // flag變量用于標(biāo)記是否所有的屬性都執(zhí)行完了動(dòng)畫
            let flag = true;
 
            for (let key in obj) {
                let target = obj[key];
 
                // 1.拿到元素當(dāng)前的位置
                // let begin = parseInt(ele.style.width) || 0;
                let style = getComputedStyle(ele);
                // let begin = parseInt(style.width) || 0;
                let begin = parseFloat(style[key]) || 0;
 
                // 2.定義變量記錄步長(zhǎng)
                let step = (begin - target) > 0 ? -13 : 13;
 
                // 3.計(jì)算新的位置
                begin += step;
                // console.log(Math.abs(target - begin), Math.abs(step));
                if (Math.abs(target - begin) > Math.abs(step)) { //未執(zhí)行完動(dòng)畫
                    flag = false;
                } else { //執(zhí)行完動(dòng)畫
                    begin = target;
                }
 
                // 4.重新設(shè)置元素的位置
                // ele.style.width = begin + "px";
                ele.style[key] = begin + "px";
            }
 
            //判斷動(dòng)畫是否執(zhí)行完
            if (flag) {
                //動(dòng)畫執(zhí)行完后關(guān)閉定時(shí)器
                clearInterval(ele.timerId);
 
                //判斷是否傳入fn函數(shù)，有才執(zhí)行反之不執(zhí)行
                // if(fn){
                //     fn();
                // }
                fn && fn();
            }
        }, 100);
    }
 
    //緩動(dòng)動(dòng)畫
    function easeAnimation(ele, obj, fn) {
        clearInterval(ele.timerId);
        ele.timerId = setInterval(function() {
            // flag變量用于標(biāo)記是否所有的屬性都執(zhí)行完了動(dòng)畫
            let flag = true;
 
            for (let key in obj) {
                let target = obj[key];
 
                // 1.拿到元素當(dāng)前的位置
                let style = getComputedStyle(ele);
                let begin = parseInt(style[key]) || 0;
 
                // 2.定義變量記錄步長(zhǎng)
                // 公式: (結(jié)束位置 - 開始位置) * 緩動(dòng)系數(shù)(0 ~1)
                let step = (target - begin) * 0.3;
 
                // 3.計(jì)算新的位置
                begin += step;
                if (Math.abs(Math.floor(step)) > 1) {
                    flag = false;
                } else {
                    begin = target;
                }
                // 4.重新設(shè)置元素的位置
                ele.style[key] = begin + "px";
            }
 
            //判斷動(dòng)畫是否執(zhí)行完
            if (flag) {
                //動(dòng)畫執(zhí)行完后關(guān)閉定時(shí)器
                clearInterval(ele.timerId);
 
                //判斷是否傳入fn函數(shù)，有才執(zhí)行反之不執(zhí)行
                fn && fn();
            }
        }, 100);
    }
 
    // 將函數(shù)綁定到window對(duì)象上, 這樣全局就可以使用了
    window.linearAnimation = linearAnimation;
    window.easeAnimation = easeAnimation;
})();