弾力性のあるナビゲーション効果を実現するJavaScript

この記事では、弾性ナビゲーション効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

主にoffsetXを使用

1. まず足場を構築します。

* {
      マージン: 0;
      パディング: 0;
        }
        
        .nav {
            幅: 900ピクセル;
            高さ: 63px;
            背景: url(images/doubleOne.png) 繰り返しなし 右中央;
            境界線: 1px 実線 #ccc;
            マージン: 100px 自動;
            位置: 相対的;
        }
        
        ul {
            位置: 相対的;
            zインデックス: 999;
        }
        
        ul>li {
            リストスタイル: なし;
            フロート: 左;
            幅: 88ピクセル;
            高さ: 63px;
            行の高さ: 63px;
            テキスト配置: 中央;
        }
        
        スパン {
            表示: インラインブロック;
            幅: 88ピクセル;
            高さ: 63px;
            背景: url("images/tMall.png") 繰り返しなし;
            位置: 絶対;
            左: 0;
            上: 0;
}

<div class="nav">
        <ul>
            <li>ダブル11カーニバル</li>
            <li>衣料品の会場</li>
            <li>デジタル家電</li>
            <li>住宅建築資材</li>
            <li>ママとベビーの服</li>
            <li>移動会場</li>
            <li>美容とメイクアップの会場</li>
            <li>輸入会場</li>
            <li>フリギートラベル</li>
        </ul>
        <span></span>
</div>

2. ロジック部分を書く

//1. 操作対象となる要素を取得します。const oItems = document.querySelectorAll("li");
 oSpan = document.querySelector("span"); とします。
 
//2. 各メニューのクリックイベントをリッスンします for (let i = 0; i < oItems.length; i++) {
            item = oItems[i]とします。
            アイテム.onclick = 関数() {
                //offsetLeft は、クリックされた要素の、最初に配置された祖先要素からのオフセットを取得します // console.log(this.offsetLeft);
                // oSpan.style.left = this.offsetLeft + 'px';
                //関数easeAnimation(oSpan, { を呼び出す
                    "左": this.offsetLeft
                });
            };
        }

アニメーション

（関数（） {
    /**
     * 等速アニメーション* @param {*} ele アニメーションを実行する要素* @param {*} obj アニメーション化する必要がある要素の属性* @param {*} fn アニメーションが完了した後に実行する必要がある可能性のある操作* 
     * メソッド参照の呼び出し * linearAnimation(oDiv, {
                "マージントップ": 500,
                "左余白": 300
        });
     */
    関数 linearAnimation(ele, obj, fn) {
        間隔をクリアします(ele.timerId);
        ele.timerId = setInterval(関数() {
            // フラグ変数は、すべてのプロパティがアニメーションを完了したかどうかを示すために使用されます。let flag = true;
 
            for (let key in obj) {
                ターゲットをobj[キー]とします。
 
                // 1. 要素の現在の位置を取得します // let begin = parseInt(ele.style.width) || 0;
                スタイルを getComputedStyle(ele);
                // begin = parseInt(style.width) || 0 とします。
                begin = parseFloat(style[key]) || 0 とします。
 
                // 2. ステップの長さを記録する変数を定義します。let step = (begin - target) > 0 ? -13 : 13;
 
                // 3. 新しい位置を計算します。begin += step;
                // console.log(Math.abs(target - begin), Math.abs(step));
                if (Math.abs(target - begin) > Math.abs(step)) { //アニメーションが完了していない flag = false;
                } else { //アニメーションを実行した後 begin = target;
                }
 
                // 4. 要素の位置をリセットします // ele.style.width = begin + "px";
                ele.style[キー] = begin + "px";
            }
 
            //アニメーションが実行されたかどうかを判定する if (flag) {
                //アニメーションが終了したら、タイマーをオフにします。clearInterval(ele.timerId);
 
                //fn関数が渡されたかどうかを判断し、渡された場合は実行し、そうでない場合は実行しません // if (fn) {
                // fn();
                // }
                fn && fn();
            }
        }, 100);
    }
 
    //簡単なアニメーション関数easeAnimation(ele, obj, fn) {
        間隔をクリアします(ele.timerId);
        ele.timerId = setInterval(関数() {
            // フラグ変数は、すべてのプロパティがアニメーションを完了したかどうかを示すために使用されます。let flag = true;
 
            for (let key in obj) {
                ターゲットをobj[キー]とします。
 
                // 1. 要素の現在の位置を取得します。let style = getComputedStyle(ele);
                begin = parseInt(style[key]) || 0 とします。
 
                // 2. 可変レコードステップサイズを定義する // 式: (終了位置 - 開始位置) * イージング係数 (0 ~ 1)
                ステップ = (ターゲット - 開始) * 0.3 とします。
 
                // 3. 新しい位置を計算します。begin += step;
                (Math.abs(Math.floor(step)) > 1) の場合 {
                    フラグ = false;
                } それ以外 {
                    開始 = ターゲット;
                }
                // 4. 要素の位置をリセットします。ele.style[key] = begin + "px";
            }
 
            //アニメーションが実行されたかどうかを判定する if (flag) {
                //アニメーションが終了したら、タイマーをオフにします。clearInterval(ele.timerId);
 
                // fn 関数が渡されたかどうかを判断し、渡された場合は実行し、そうでない場合は実行しません fn && fn();
            }
        }, 100);
    }
 
    // 関数をウィンドウ オブジェクトにバインドして、グローバルに使用できるようにします。window.linearAnimation = linearAnimation;
    ウィンドウのアニメーションをイーズアニメーションにします。
})();