jq 楼层效果

最新推荐文章于 2021-12-18 15:19:36 发布

原创最新推荐文章于 2021-12-18 15:19:36 发布 · 269 阅读

0 ·

CC 4.0 BY-SA版权

JS类同时被 2 个专栏收录

202 篇文章

订阅专栏

jquery

13 篇文章

订阅专栏

这篇博客通过CSS和jQuery展示了如何创建楼层效果。当点击左侧菜单的列表项时，对应的右侧图片区域会高亮显示，并平滑滚动到相应位置。同时，当页面滚动时，根据滚动条的位置自动激活相应的楼层标记。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style>
    *{
        list-style:none;
        padding: 0;
        margin: 0;
    }
    #center{
        position: fixed;
        top: 200px;
        left: 100px;
        cursor: pointer;
    }
    #right-img{
        width: 50%;
        margin-left: 300px;
    }
    .right-img-img{
        width: 100%;
        height: 500px;
        border: 1px solid #ccc;
    }
    .active{
        color: red;
    }
</style>

<div id="center">
    <lu>
        <li> Expose</li>
        <li> jsPDF</li>
        <li> BaySentry</li>
        <li> vtop</li>
    </lu>
</div>
<div id="right-img" style="padding-bottom: 100px;">
    <div class="right-img-img">
        Expose
    </div>
    <div class="right-img-img">
        jsPDF
    </div>
    <div class="right-img-img">
        BaySentry
    </div>
    <div class="right-img-img">
        vtop
    </div>
</div>

<script>
    $(function(){
        $('li').eq(0).addClass('active')
        // 点击出现楼层效果；
        // scrollTop 是滚动条距离顶部的距离；
        $('li').click(function(){
            var index = $(this).index();
            $(this).addClass('active').siblings().removeClass('active')
            var divTop = $('.right-img-img').eq(index).offset().top;
            $('html,  body').animate({ scrollTop: parseInt(divTop)}, 500)
        })
        // 滚动条滚动事件；
        $(window).scroll(function(){
            var sm = $(document).scrollTop();
            var index = Math.floor(sm / 500);
            console.log(index)
            $("li").eq(index).addClass("active").siblings().removeClass("active");

        })
    })
    
</script>