jquery电梯导航的另外一种方法

比眉伴天荒 2022-10-02 09:56 162阅读 0赞

/*
        	 * 1、页面滚动到 相应的第一楼的时候  右边楼梯的索引按钮  要去显示
        	 * 窗口的滚动条  scrollTop  >  1T  右边楼梯的索引按钮  要去显示
        	 * 第一楼的div  1T $dom.offset().top  第一个到达body文档的距离
        	 * 当前1楼的索引按钮  active 选中样式
        	 * 
        	 * 2、页面滚动到  第二楼的时候
        	 * 第二楼的  2T $dom.offset().top
        	 * 窗口的滚动条  scrollTop  > 2T
        	 * 全部按钮索引给去掉选中样式  再给当前的 二楼的按钮加上 active
        	 * 。。。。
        	 * 
        	 * 3、当点击左边按钮的时候  要取消滚动的 事件的监听
        	 * scrollTop = 当前所点击的楼层的  相应的  商品的  $dom.offset().top
        	 * 加上相应的  动画效果
        	 * 
        	 * 
        	 * 着重点  把楼层的id和相应的  楼层的按钮的  id或者class有关系  不管是什么属性都好
        	 * 一定要有一定的关系
        	 * 不一定是id或者属性一定要有关系  或者是有下标关系的时候  也可以
        	 * 总之来说  他们一定要有关系
        	 */

* {
                padding: 0;
                margin: 0;
                list-style: none;
            }
            
            body {
                font-size: 12px;
                line-height: 1.7;
            }
            
            #content {
                width: 800px;
                padding: 20px;
                margin: 0 auto;
            }
            
            #content h1 {
                color: #0088bb;
            }
            
            .item {
                border: 1px dotted #08b;
                padding: 20px;
                margin-bottom: 20px;
            }
            
            .item h2 {
                font-size: 16px;
                font-weight: bold;
                border-bottom: 2px solid #08b;
                margin-bottom: 10px;
            }
            
            .item li {
                display: inline;
                margin-right: 10px;
            }
            
            .item img {
                width: 240px;
                height: 230px;
            }
            
            #list {
                position: fixed;
                top: 100px;
                left: 50%;
                margin-left: 400px;
                width: 50px;
                display: none;
            }
            
            #list a {
                display: block;
                width: 80px;
                height: 50px;
                color: #333;
                text-decoration: none;
                font: bold 14px/50px "微软雅黑";
                text-align: center;
            }
            
            #list a:hover,
            #list a.active {
                background: #08b;
                color: white;
            }

<body>
        <div style="width: 100%;height: 1000px;background: #99ffcc;"></div>
        <ul id="list">
            <li><a href="#item1" class="active">1F 男装</a></li>
            <li><a href="#item2">2F 女装</a></li>
            <li><a href="#item3">3F 美妆</a></li>
            <li><a href="#item4">4F 数码</a></li>
            <li><a href="#item5">5F 电器</a></li>
        </ul>
        <div id="content">
            <h1>网页导航特效</h1>
            <div id="item1" class="item">
                <h2>1F 男装</h2>
                <ul>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                </ul>
            </div>
            <div id="item2" class="item">
                <h2>2F 女装</h2>
                <ul>
                    <li>
                        <a href="#"><img src="img/2.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/2.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/2.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/2.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/2.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/2.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/2.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/2.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/2.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/2.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/2.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/2.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/2.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/2.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/2.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/2.jpg" alt=""></a>
                    </li>
                </ul>
            </div>
            <div id="item3" class="item">
                <h2>3F 美妆</h2>
                <ul>
                    <li>
                        <a href="#"><img src="img/3.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/3.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/3.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/3.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/3.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/3.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/3.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/3.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/3.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/3.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/3.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/3.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/3.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/3.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/3.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/3.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/3.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/3.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/3.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/3.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/3.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/3.jpg" alt=""></a>
                    </li>
                </ul>
            </div>
            <div id="item4" class="item">
                <h2>4F 数码</h2>
                <ul>
                    <li>
                        <a href="#"><img src="img/4.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/4.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/4.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/4.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/4.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/4.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/4.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/4.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/4.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/4.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/4.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/4.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/4.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/4.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/4.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/4.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/4.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/4.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/4.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/4.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/4.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/4.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/4.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/4.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/4.jpg" alt=""></a>
                    </li>
                </ul>
            </div>
            <div id="item5" class="item">
                <h2>5F 电器</h2>
                <ul>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                    </li>
                </ul>
            </div>
        </div>
    </body>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: /images/20220113/45f72444709245e5aa3352d22ce6e95a.png