jQuery 京东楼层效果

最新推荐文章于 2023-12-18 00:37:39 发布

WinterWang0207

最新推荐文章于 2023-12-18 00:37:39 发布

阅读量589

点赞数

分类专栏： jQuery 案例

本文链接：https://blog.csdn.net/weixin_38404899/article/details/87940365

版权

jQuery 案例专栏收录该内容

7 篇文章 0 订阅

订阅专栏

最终效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-京东楼层效果</title>
    <style>
        *{
            margin: 0;
            border: 0;
            padding: 0;
            list-style: none;
        }
        .main{
            width: 1210px;
            margin: auto;
        }
        .main img{
            display: block;
        }
        .main .floor{
            margin-bottom: 10px;
        }
        .aside{
            width: 30px;
            position: fixed;
            top: 25%;
            left: 10px;
            display: none;
        }
        ul>li{
            list-style: none;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-bottom: 1px dashed red;
            cursor: pointer;
        }
        ul>li:hover{
            background: pink;
        }
        ul>.cur{
            background: pink;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 1.监听楼层点击事件
            $("li").click(function () {
                // 1.0设置当前点击楼层背景颜色
                $(this).addClass("cur").siblings().removeClass("cur");
                // 1.1.获取当前点击的楼层索引
                var index = $(this).index();
                // 1.2获取索引对应楼层距离顶部的距离
                var offset = $(".floor").eq(index).offset().top;
                // 1.3让网页滚动到对应楼层的位置
                $("html,body").animate({scrollTop: offset}, 1000);
            });
            // 2.监听网页滚动事件
            $(window).scroll(function () {
                // 2.1获取网页滚动的距离
                var $winOffset = $(window).scrollTop();

                // 获取网页高度
                var $winHeight = $(window).height();
                // 判断是否滚出一屏
                if($winOffset >= $winHeight){
                    $(".aside").stop().fadeIn(500);
                }else{
                    $(".aside").stop().fadeOut(500);
                }

                // 2.2遍历拿所有楼层
                $(".floor").each(function (idx, ele) {
                    // 2.2.1获得当前楼层距离顶部距离
                    var $floorOffset = $(ele).offset().top;
                    // 2.2.2获取当前楼层高度
                    var $floorHeight = $(ele).height();

                    // 2.2.3判断滚动出去的距离是否大于当前楼层
                    if($winOffset >= $floorOffset){
                        // 获取对应楼层按钮
                        var $li = $("li").eq(idx);
                        // 自动设置楼层按钮背景为当前楼层
                        $li.addClass("cur").siblings().removeClass("cur");
                    }
                });
            });
        });
    </script>
</head>
<body>
<div class="main">
    <img src="jd/01.png" alt="" />
    <img class="floor" src="/jd/02.png" alt="" />
    <img class="floor" src="jd/03.png" alt="" />
    <img src="jd/04.png" alt="" />
    <img class="floor" src="jd/05.png" alt="" />
    <img class="floor" src="jd/06.png" alt="" />
    <img class="floor" src="jd/07.png" alt="" />
    <img src="jd/08.png" alt="" />
    <img class="floor" src="jd/09.png" alt="" />
    <img class="floor" src="jd/10.png" alt="" />
    <img class="floor" src="jd/11.png" alt="" />
    <img class="floor" src="jd/12.png" alt="" />
    <img src="jd/13.png" alt="" />
    <img class="floor" src="jd/14.png" alt="" />
    <img class="floor" src="jd/15.png" alt="" />
    <img class="floor" src="jd/16.png" alt="" />
    <img src="jd/17.png" alt="" />
<div class="aside">
    <ul>
        <li class="cur">1F</li>
        <li>2F</li>
        <li>3F</li>
        <li>4F</li>
        <li>5F</li>
        <li>6F</li>
        <li>7F</li>
        <li>8F</li>
        <li>9F</li>
        <li>10F</li>
        <li>11F</li>
        <li>12F</li>
    </ul>
</div>
</body>
</html>

WinterWang0207

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery 京东楼层效果

最终效果&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;02-京东楼层效果&lt;/title&gt; &lt;style&gt; *{
复制链接

扫一扫

专栏目录