3行代码实现楼层效果

最新推荐文章于 2022-06-09 18:27:27 发布

✧* ꧁柠檬ヤ汽水꧂✧*

最新推荐文章于 2022-06-09 18:27:27 发布

阅读量369

点赞数 1

分类专栏： jquery jq 楼层文章标签： jquery html5 javascript

本文链接：https://blog.csdn.net/qq_44381873/article/details/105019414

版权

jquery 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

楼层

1 篇文章 0 订阅

订阅专栏

一、基础样式布局

<style>
        .floor{width: 1000px;height: 500px;font:50px/500px "";text-align: center;}
        .box1{background: #f00;}
        .box2{background: #f0f;}
        .box3{background: #ff0;}
        .box4{background: #00f;}

        .list{width: 100px;margin: 0;padding: 0;background: #ccc;position: fixed;right: 0;top:200px;}
        .list li{list-style: none;height: 40px;line-height: 40px;text-align: center;border-bottom: solid 1px #fff;cursor: pointer;}

    </style>

二、基础布局

<body>
    <div class="floor box1">男装</div>
    <div class="floor box2">女装</div>
    <div class="floor box3">电脑</div>
    <div class="floor box4">手机</div>

    <ul class="list">
        <li>男装</li>
        <li>女装</li>
        <li>电脑</li>
        <li>手机</li>
    </ul>
</body>

三、引入外部文件

<script src="jquery.js"></script>

四、3行核心代码

<script>
    $(".list").children("li").click(function(){
        $("html").animate({
            scrollTop:$(".floor").eq($(this).index()).offset().top
        })
    })
</script>