jquery楼层滚动特效

最新推荐文章于 2022-02-26 22:00:26 发布

zhrookie

最新推荐文章于 2022-02-26 22:00:26 发布

阅读量5.5k

点赞数 2

分类专栏： jquery

本文链接：https://blog.csdn.net/zhrookie/article/details/54172084

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jq 楼层滚动效果</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            i {
                font-style: normal;
            }

            ul,
            li, 
            dl,
            ol{
                list-style: none;
            }

            #LoutiNav {
                border: 1px solid gray;
                width: 30px;
                position: fixed;
                top: 150px;
                left: 50px;
                display: none;
            }

            #LoutiNav li {
                width: 30px;
                height: 30px;
                border-bottom: 1px solid gray;
                line-height: 30px;
                text-align: center;
                cursor: pointer;
            }

            #LoutiNav span {
                display: none;
            }

            #LoutiNav .active {
                background: white;
                color: darkred;
            }

            #LoutiNav li:hover span {
                display: block;
                font-size: 12px;
                background: darkred;
                color: white;
            }

            #LoutiNav li:hover i {
                display: none;
            }

            #goTop {
                width: 40px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                background: gray;
                position: fixed;
                bottom: 30px;
                right: 30px;
                cursor: pointer;
                border-radius: 5px;
                display: none;
            }

            #goTop:hover {
                background: darkred;
                color: white;
            }

            #goTop:hover span {
                display: block;
            }

            #erweima {
                width: 130px;
                height: 130px;
                background: palegreen;
                display: none;
                position: absolute;
                right: 46px;
                bottom: 5px;
                line-height: 130px;
                text-align: center;
                font-size: 20px;
                border-radius: 10px;
            }

            #header {
                height: 200px;
                background: palegoldenrod;
                text-align: center;
                line-height: 200px;
                font-size: 72px;
                margin: 0 auto;
            }

            .louceng {
                height: 810px;
                text-align: center;
                line-height: 610px;
                font-size: 120px;
                margin: 0 auto;
            }
        </style>
        <script src="js/jquery-1.7.2.min.js"></script>
    </head>

    <body>
        <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="goTop">
            <span id="erweima">我是二维码</span> Top
        </div>
        <div id="header">头部</div>
        <div id="main">
            <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>
        <script>
            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('active');
                                aNav.eq($(this).index()).addClass('active');
                            }
                        })
                    } else {
                        oNav.fadeOut();
                        oTop.fadeOut();
                    }
                })
            //点击回到当前楼层
            aNav.click(function() {
                var t = aDiv.eq($(this).index()).offset().top;
                $('body,html').animate({
                    "scrollTop": t
                }, 500);
                $(this).addClass('active').siblings().removeClass('active');
            });
            //回到顶部
            oTop.click(function() {
                $('body,html').animate({
                    "scrollTop": 0
                }, 500)
            })
        </script>
    </body>
</html>