jquery淘宝精品案例

jquery淘宝精品案例

html:

   <div class="wrapper">
            <ul id="left">
                <li><a href="#">女靴</a></li>
                <li><a href="#">雪地靴</a></li>
                <li><a href="#">冬裙</a></li>
                <li><a href="#">呢大衣</a></li>
                <li><a href="#">毛衣</a></li>
                <li><a href="#">棉服</a></li>
                <li><a href="#">女裤</a></li>
                <li><a href="#">羽绒服</a></li>
                <li><a href="#">牛仔裤</a></li>
            </ul>
            <ul id="center">
                <li><a href="#"><img src="img/女靴.jpg" width="200" height="250"></a></li>
                <li><a href="#"><img src="img/雪地靴.jpg" width="200" height="250"></a></li>
                <li><a href="#"><img src="img/冬裙.jpg" width="200" height="250"></a></li>
                <li><a href="#"><img src="img/呢大衣.jpg" width="200" height="250"></a></li>
                <li><a href="#"><img src="img/毛衣.jpg" width="200" height="250"></a></li>
                <li><a href="#"><img src="img/棉服.jpg" width="200" height="250"></a></li>
                <li><a href="#"><img src="img/女裤.jpg" width="200" height="250"></a></li>
                <li><a href="#"><img src="img/羽绒服.jpg" width="200" height="250"></a></li>
                <li><a href="#"><img src="img/牛仔裤.jpg" width="200" height="250"></a></li>

                <li><a href="#"><img src="img/女包.jpg" width="200" height="250"></a></li>
                <li><a href="#"><img src="img/男靴.jpg" width="200" height="250"></a></li>
                <li><a href="#"><img src="img/登山鞋.jpg" width="200" height="250"></a></li>
                <li><a href="#"><img src="img/皮带.jpg" width="200" height="250"></a></li>
                <li><a href="#"><img src="img/围巾.jpg" width="200" height="250"></a></li>
                <li><a href="#"><img src="img/皮衣.jpg" width="200" height="250"></a></li>
                <li><a href="#"><img src="img/男毛衣.jpg" width="200" height="250"></a></li>
                <li><a href="#"><img src="img/男棉服.jpg" width="200" height="250"></a></li>
                <li><a href="#"><img src="img/男包.jpg" width="200" height="250"></a></li>
            </ul>
            <ul id="right">
                <li><a href="#">女包</a></li>
                <li><a href="#">男靴</a></li>
                <li><a href="#">登山鞋</a></li>
                <li><a href="#">皮带</a></li>
                <li><a href="#">围巾</a></li>
                <li><a href="#">皮衣</a></li>
                <li><a href="#">男毛衣</a></li>
                <li><a href="#">男棉服</a></li>
                <li><a href="#">男包</a></li>
            </ul>
        </div>

css:

            *{
                margin: 0;
                padding: 0;
                font-size: 12px;
            }
            ul{ list-style: none;}
            a{
                text-decoration: none;
            }
            .wrapper{
                width: 298px;
                height: 248px;
                margin: 100px auto 0;
                border: 1px solid pink;
                overflow: hidden;
            }
            #left,#center,#right{
                float: left;
            }
            #left li,#right li{
                background: url(img/lili.jpg) repeat-x;
            }
            #left li a, #right li a{
                display: block;
                width: 48px;
                height: 27px;
                border-bottom: 1px solid pink;
                line-height: 27px;
                text-align: center;
                color: black;
            }
            #left li a:hover,#right li a:hover{
                background-image: url(img/abg.gif);
            }
            #center{
                border-left: 1px solid pink;
                border-right: 1px solid pink;
            }

jq:

        <script src="js/jquery-3.5.1.min.js"></script>
        <script>
            /* 需求：鼠标悬浮在哪个超链中，中间显示什么样的图片 */
            $(function(){
                // 给左侧的 ul无序列表中的 每一个li  注册 mouseenter鼠标移入事件
                $('#left>li').mouseenter(function(){
                    // // 1.找 中间区域 对应的li元素
                    // $('#center li:eq('+$(this).index()+')').show();
                    // // 2. 中间区域 对应的li元素 的 所有的 兄弟元素li 隐藏起来
                    // $('#center li:eq('+$(this).index()+')').siblings().hide();

                    $('#center li:eq('+$(this).index()+')').show().siblings().hide();
                })

                // 给右侧的 ul无序列表中的 每一个li  注册 mouseenter鼠标移入事件
                $('#right>li').mouseenter(function(){
                    var _index = $(this).index()+9;
                    console.log(_index);
                    $('#center li:eq('+_index+')').show().siblings().hide();
                })
            });
        </script>

分析：

mouseenter() 注册 鼠标移入事件----mouseenter([[data],fn])当鼠标指针穿过元素时，会发生 mouseenter 事件。

$(this).index()

index([selector|element]) 搜索匹配的元素，并返回相应元素的索引值，从0开始计数。

$("#center>li:eq("+$(this).index()+")")

show() 显示隐藏的匹配元素。

siblings()  找 同辈的兄弟元素（集合）

hide() 隐藏显示的元素