模仿京东楼层跳转效果,附注释

Posted baimeishaoxia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了模仿京东楼层跳转效果,附注释相关的知识,希望对你有一定的参考价值。

技术图片<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .main{
            width: 700px;
            border: 1px solid red;
            margin: 0 auto;
        }
        .main .floor{
            height: 400px;
            font-size: 60px;
            color: white;
            text-align: center;
            line-height: 400px;
        }
        .red{
            background: red;
        }
        .blue{
            background: blue;
        }
        .green{
            background: green;
        }
        .purple{
            background: purple;
        }
        .pink{
            background: pink;
        }
        .yellow{
            background: yellow;
        }
        .floorMenu{
            list-style: none;
            width: 40px;
            border: 1px solid black;
            border-bottom: none;
            position: fixed;
            top: 40px;
            left: 40px;
        }
        .floorMenu li{
            width: 40px;
            height:40px;
            line-height: 40px;
            border-bottom: 1px solid black;
            text-align: center;
        }
        .floorMenu li.active{
            background: black;
            color: white;
        }
    </style>
</head>
<body>
    <div class="main">
        <ul class="floorMenu">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
        <div class="floor red">1</div>
        <div class="floor blue">2</div>
        <div class="floor green">3</div>
        <div class="floor purple">4</div>
        <div class="floor pink">5</div>
        <div class="floor yellow">6</div>
    </div>
</body>

<script type="text/javascript">
    //1. 获得每层楼距离页面顶部的距离,并将它们放入一个数组中。
    var floorArr = [];
    $(".floor").each(function(){
        let everyTop = $(this).offset().top;    //每个div距离页面顶部的距离。
        floorArr.push(everyTop);
    })
    
    //2. 监听滚动条滚过的距离,根据距离去判断滚到了那一层楼。
        //2.1 绑定滚动事件,并且获得滚动的距离            
        //用on来绑定的事件可以使用off取消,因为点击楼层的时候,会有附带的跑马灯效果。方便取消监听。
        $(window).on("scroll",scrollMove)
        function scrollMove(){
            //滚动条滚动的距离
            var scrollTop = $(window).scrollTop()+100;
            var index = 0;
            for(var i=0; i<floorArr.length; i++){
                var now = floorArr[i];    //当前楼层距离顶部的距离
                var next = floorArr[i+1];    //下一楼层距离顶部的距离。
                if(scrollTop>=now && scrollTop<next){
                    index = i;
                }else if(scrollTop>=floorArr[floorArr.length-1]){
                    index = floorArr.length-1;
                }
            }
            
        //3. 根据楼层索引,去改变楼层导航的样式
            $(".floorMenu li").eq(index).addClass("active").siblings("li").removeClass("active")      
        }
        //4. 给楼层导航绑定点击事件。
        $(".floorMenu li").click(function(){
            //取消滚动监听
            $(window).off("scroll");
            $(this).addClass("active").siblings("li").removeClass("active");
            //获得点击li的索引。
            var idx  = $(this).index();
            //根据索引获取楼层顶部距离
            var sTop = floorArr[idx];
            $(document.body).animate({
                scrollTop:sTop
            },500,function(){    //回调函数,因为取消了监听事件,所以在点击完之后,在次调用监听事件。
                $(window).on("scroll",scrollMove)
            })
            
        })
</script>

</html>

以上是关于模仿京东楼层跳转效果,附注释的主要内容,如果未能解决你的问题,请参考以下文章

vue实现京东动态楼层效果

ElastSearch整合SpringBoot模仿京东商城实现关键字高亮显示

jQuery防京东浮动网站楼层导航代码

京东楼层案例思维逻辑分析

jQuery实际案例⑤——仿京东侧边栏(楼层)

京东楼层