床スクロール効果を実現する js

この記事ではjQueryを使用して、階段のスライド効果を実装し、フロアをスクロールし、フロアボタンをクリックして対応するフロアにジャンプします。コードは次のとおりです。

HTMLコード:

<div style="height: 500px; background-color: black; color: #fff;">意味のないテキスト</div>
 
    <div class="layerbox">
        <div class="layer num1">レイヤー 1</div>
        <div class="layer num2">レイヤー 2</div>
        <div class="layer num3">3 番目のレイヤー</div>
        <div class="layer num4">レイヤー 4</div>
    </div>
    <div class="nav">
        <ul>
            <li>1階</li>
            <li>2階</li>
            <li>3階</li>
            <li>4階</li>
   </ul>
</div>

CSSコード:

* {
         マージン: 0;
         パディング: 0;
        }
 
        .レイヤー{
            高さ: 300px;
            フォントサイズ: 80px;
            色: 白;
            テキスト配置: 中央;
        }
 
        .num1 {
            背景色: 赤;
        }
 
        .num2 {
            背景色: 青;
        }
 
        .num3 {
            背景色: 黄色;
        }
 
        .num4 {
            背景色: 緑;
        }
 
        .nav {
            位置: 固定;
            右: 50px;
            下部: 400px;
            背景色: ピンク;
        }
 
        ul {
            リストスタイル: なし;
        }
 
        ul li {
            パディング: 10px;
            幅: 50px;
            高さ: 50px;
            行の高さ: 50px;
            テキスト配置: 中央;
            境界線: 1px実線 #000;
        }
 
        ul li.active {
            背景色: 深紅;
        }

jsコード:

<スクリプト>
        var レイヤー = document.querySelectorAll(".layer")
        var lis = document.querySelectorAll('li')
        (i = 0 とします; i < lis.length; i++) {
            定数 li = lis[i]
            li.onclick = 関数 (e) {
                //ページオフセット、元のページのスクロール距離 var scrollTop = document.documentElement.scrollTop
                var offsetTop = レイヤー[i].offsetTop
                スクロールトップ > オフセットトップの場合
                    // スクロールバーが上に移動する var timer = setInterval(function () {
                        スクロールトップ > オフセットトップの場合
                            スクロールトップ -= 40
                            （スクロールトップ - オフセットトップ < 40）の場合{
                                // 最後の穴までの距離が40未満の場合は、オフセットを直接0に設定します
                                ウィンドウのスクロール範囲を0からオフセット上へ変更
                            } それ以外 {
                                ウィンドウのスクロール範囲を0から上へ変更
                            }
                        } それ以外 {
                            クリアインターバル(タイマー)
                        }
                    }, 50)
                } それ以外 {
                    // スクロールバーが下に移動します // scrollTop <= offsetTop
                    var タイマー = setInterval(関数 () {
                        スクロールトップがオフセットトップより小さい場合
                            スクロールトップ += 40
                            （オフセットトップ - スクロールトップ < 40）の場合{
                                ウィンドウのスクロール範囲を0からオフセット上へ変更
                            } それ以外 {
                                ウィンドウのスクロール範囲を0から上へ変更
                            }
                        } それ以外 {
                            クリアインターバル(タイマー)
                        }
                    }, 50);
 
 
                }
 
            }
        }
  
        window.onscroll = 関数 (e) {
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            レイヤー.forEach(関数(v, i) {
                (v.clientHeight + v.offsetTop > scrollTop && scrollTop > v.offsetTop) の場合 {
                    // スクロールしたフロアが最上部の範囲に到達して消える lis[i].classList.add("active")
                } それ以外 {
                    lis[i].classList.remove("アクティブ")
                }
            })
 
        }
 
</スクリプト>

エディターは別のコードを共有します: jQuery フロアスクロール特殊効果

<!DOCTYPE html>
<html>
    <ヘッド>
        <メタ文字セット="UTF-8">
        <title>jq フロアスクロール効果</title>
        <スタイル>
            * {
                マージン: 0;
                パディング: 0;
            }

            私 {
                フォントスタイル: 通常;
            }

            ウル、
            李、 
            dl、
            オル{
                リストスタイル: なし;
            }

            #LoutiNav {
                境界線: 1px の灰色
                幅: 30ピクセル;
                位置: 固定;
                上: 150px;
                左: 50px;
                表示: なし;
            }

            #LoutiNav li {
                幅: 30ピクセル;
                高さ: 30px;
                border-bottom: 1px グレー実線;
                行の高さ: 30px;
                テキスト配置: 中央;
                カーソル: ポインタ;
            }

            #LoutiNav スパン {
                表示: なし;
            }

            #LoutiNav .active {
                背景: 白;
                色: ダークレッド;
            }

            #LoutiNav li:hover span {
                表示: ブロック;
                フォントサイズ: 12px;
                背景: 濃い赤;
                色: 白;
            }

            #LoutiNav li:hover i {
                表示: なし;
            }

            #トップへ戻る
                幅: 40px;
                高さ: 40px;
                行の高さ: 40px;
                テキスト配置: 中央;
                背景: グレー;
                位置: 固定;
                下: 30px;
                右: 30px;
                カーソル: ポインタ;
                境界線の半径: 5px;
                表示: なし;
            }

            #goTop:ホバー{
                背景: 濃い赤;
                色: 白;
            }

            #goTop:ホバースパン{
                表示: ブロック;
            }

            #エルウェイマ
                幅: 130ピクセル;
                高さ: 130px;
                背景：淡い緑;
                表示: なし;
                位置: 絶対;
                右: 46px;
                下: 5px;
                行の高さ: 130px;
                テキスト配置: 中央;
                フォントサイズ: 20px;
                境界線の半径: 10px;
            }

            #ヘッダー{
                高さ: 200px;
                背景：淡いゴールデンロッド;
                テキスト配置: 中央;
                行の高さ: 200px;
                フォントサイズ: 72px;
                マージン: 0 自動;
            }

            .louceng {
                高さ: 810px;
                テキスト配置: 中央;
                行の高さ: 610px;
                フォントサイズ: 120px;
                マージン: 0 自動;
            }
        </スタイル>
        <script src="js/jquery-1.7.2.min.js"></script>
    </head>

    <本文>
        <ul id="LoutiNav">
            <li class="active"><i>1F</i><span>衣料品</span></li>
            <li><i>2F</i><span>ビューティー</span></li>
            <li><i>3F</i><span>携帯電話</span></li>
            <li style="border-bottom: none;"><i>4F</i><span>家電製品</span></li>
        </ul>
        <div id="トップへ移動">
            <span id="erweima">私はQRコードです</span> トップ
        </div>
        <div id="header">ヘッダー</div>
        <div id="メイン">
            <div class="louceng" style="background: papayawhip;">衣類</div>
            <div class="louceng" style="background: peachpuff;">美しさ</div>
            <div class="louceng" style="background: peru;">携帯電話</div>
            <div class="louceng" style="background: pink;">家電製品</div>
        </div>
        <スクリプト>
            var oNav = $('#LoutiNav'); //ナビゲーションシェル var aNav = oNav.find('li'); //ナビゲーション var aDiv = $('#main .louceng'); //フロア var oTop = $('#goTop'); //トップに戻る $(window).scroll(function() {
                    // 表示されるウィンドウの高さ var winH = $(window).height();
                    //マウスのスクロール距離 var iTop = $(window).scrollTop();

                    if(iTop >= $("#header").height()) {
                        oNav.fadeIn();
                        oTop.fadeIn();
                        //マウスのスライドスタイルの変更 aDiv.each(function() {
                            if(winH + iTop - $(this).offset().top > winH / 2) {
                                aNav.removeClass('アクティブ');
                                aNav.eq($(this).index()).addClass('active');
                            }
                        })
                    } それ以外 {
                        oNav.fadeOut();
                        oTop.fadeOut();
                    }
                })
            //クリックすると現在のフロアに戻ります aNav.click(function() {
                var t = aDiv.eq($(this).index()).offset().top;
                $('body,html').animate({
                    "スクロールトップ": t
                }, 500);
                $(this).addClass('active').siblings().removeClass('active');
            });
            //トップに戻る oTop.click(function() {
                $('body,html').animate({
                    "スクロールトップ": 0
                }, 500)
            })
        </スクリプト>
    </本文>
</html>

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

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