階段を転がす特殊効果を実現する JavaScript (jQuery 実装)

皆さんもJDを使ったことがあると思います。ホームページには非常によく見られる機能があります。階段の特殊効果です。

私たちプログラマーにとって、すべてをディスクに保存できます。それでは見てみましょう。

まず、達成される効果図を見てみましょう。

効果機能の説明: 右側のフローティングボタンをクリックし、対応するモジュールをクリックすると、左側のコンテンツ領域が自動的にモジュール領域にジャンプします。

以下にコードを示します。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        *{
            マージン:0;
            パディング:0;
        }
        li{
            リストスタイルタイプ: なし;
        }
        。トップ{
            高さ:900ピクセル;
            背景: #ddd;
        }
        .フッター{
            高さ: 600px;
            背景: #ddd;
        }
        。コンテンツ{
            高さ:800px;
        }
        .コンテンツ h1{
            テキスト配置:中央;
            行の高さ: 80px;
        }
        .階段リスト{
            幅: 60px;
            位置: 固定;
            右：5%;
            上位:50%;
            上マージン:-120px;
            背景: #fff;
        }
        .stairs-list li{
            幅:50px;
            高さ:50px;
            行の高さ: 25px;
            テキスト配置: 中央;
            パディング:5px;
            border-bottom:1px 実線 #ddd;
        }
        .stairs-list li.active{
            色:オレンジ;
        }
        .stairs li span {
            表示: ブロック;
 
        }
 
    </スタイル>
</head>
<本文>
    <div class="top">
    </div>
    <div class="content" style="background-color: yellowgreen ">
        <h1>京東フラッシュセール</h1>
    </div>
    <div class="content" style="background-color:skyblue">
        <h1>おすすめセレクション</h1>
    </div>
    <div class="content" style="背景色: #666 ">
        <h1>チャンネルプラザ</h1>
    </div>
    <div class="content" style="background-color: orangered ">
        <h1>あなたにおすすめ</h1>
    </div>
    <div class="フッター"></div>
 
    <ul class="階段リスト">
        <li>
            <span>JD.com</span>
            <span>2 回目のキル</span>
        </li>
        <li>
            特徴
            <span>推奨</span>
        </li>
        <li>
            <span>チャンネル</span>
            <span>スクエア</span>
        </li>
         <li>
            <span>あなたのために</span>
            <span>推奨事項</span>
        </li>
    </ul>
 
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <スクリプト>
        // 補足:
 
        // 1. データを初期化します。
        // 2. イベントバインディング;
        // 3. scrollTop 値に基づいてフロアを決定します。
        // 4. エフェクトの追加;
        // 5. クリック イベントに応じて下付き文字を切り替えます。
 
 
        関数階段(オプション){
            this.options = オプション;
            これを初期化します。
        }
        階段.prototype = {
            建設者：階段、
            初期化:関数(){
                // コンテンツ要素の高さの配列;
                this.content_ele_offset_top_list = [];
                // 要素のオフセット高さを取得します。
                $(this.options.content_selector).offset( 関数( インデックス、 座標) {
                    // 各要素の高さの値を高さリストに格納します。
                    this.content_ele_offset_top_list.push(coords.top);
                    座標を返します。
                }.bind(これ)
                // 最小の高さの値を取得します。
                var _length = this.content_ele_offset_top_list.length; 
                this.min_top = this.content_ele_offset_top_list[0];
                this.max_top = this.content_ele_offset_top_list[_length - 1] + $(this.options.content_selector).last().height();
                this.content_ele_offset_top_list.push(this.max_top);
 
                このイベントをバインドします。
            },
            バインドイベント:関数(){
                var $body_html = $("body,html");
                //インスタンス オブジェクトのポインタを保存します。
                // var _this = this;
                var インスタンス = this;
                // 高頻度スクロールイベント。
                // 最適化: スロットル;
                $(document).scroll( 関数(){
                    var scrollTop = $body_html.scrollTop();
                    this.calStairsIndex(スクロールトップ);
                }.bind(これ)
                
                $(this.options.stairs_selector).click(function(){
                    // 現在イベントが発生している要素を把握します。この jQuery イベント バインディング プロセスでは、イベントが現在外部で発生している要素を渡す方法がないため、これを変更することはできません。
                    //現在のインスタンス オブジェクトは誰ですか。this;
                    var index = $(this).index(instance.options.stairs_selector);
                    インスタンスのスクロールトップを変更(インデックス)。
                })
            },
            // 現在のフロアを計算します。
            calStairsIndex: 関数(st){
                // 隔離のための階段エリアに到達しませんでした。
                if(st < this.min_top || st > this.max_top){ 
                    // コンソール.log(-1);
                    this.index = -1;
                    this.changeStairsBtn();
                    偽を返す 
                };
                // まだ範囲内であれば、判断を続ける必要はありません。
                var _list = this.content_ele_offset_top_list;
                // st がまだ現在のインデックス範囲内にある場合は、検索を続行しません。
                if(st >= _list[this.index] && st < _list[this.index + 1]){
                    false を返します。
                }
                // トラバース;
                for(var i = 0; i < _list.length; i++){
                    st >= _list[i] && st < _list[i + 1] の場合{
                        this.index = i;
                        壊す;
                    }
                }
                this.changeStairsBtn();
            },
            階段ボタンの変更: 関数(){
                if(this.index === -1){
                    $(this.options.stairs_selector).removeClass("アクティブ");
                    false を返します。
                }
                $(this.options.stairs_selector).eq(this.index).addClass("アクティブ")
                。兄弟（）
                .removeClass("アクティブ");
            },
            changeScrollTop: 関数(インデックス){
                $("body,html").scrollTop(this.content_ele_offset_top_list[index]);
                // イベントトリガー;
                $(document).trigger("スクロール");
            }
        }
 
        var staris = 新しい階段({
            コンテンツセレクター: ".content",
            階段セレクター: ".stairs-list li"
        });
        コンソールにログ出力します。
 
     
    </スクリプト>
</本文>
</html>

今、私たちは同じ機能効果を達成することができます。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: