jQuery案例--仿淘宝精品栏

以你之姓@ 2023-01-02 11:25 184阅读 0赞

# jQuery案例–仿淘宝精品栏 #

在淘宝（今天我去找了找没找到）之前会有这样一个小窗口，推荐一些精品的东西，左边有推荐的东西，右边会有图片，鼠标放在商品名称上，商品名称的背景颜色会变成红色，而且右边的图片会变成相对应的图片。今天我们来实现一下这个案例。

![在这里插入图片描述][2021010517452799.png_pic_center]

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>仿淘宝精品栏</title>
        <script src="jquery.js"></script>
        <style>
            *{
         
                margin: 0;
                padding: 0;
            }
            a {
         
                text-decoration: none;
                color: black;
            }
            .box {
         
                width: 450px;
                height: 400px;
                background-color: black;
            }
            .left {
         
                float: left;
                width: 50px;
                height: 400px;
                background-color: pink;
            }
            .right {
         
                float: left;
                width: 400px;
                height: 400px;
                background-color: skyblue;
            }
            .left>li {
         
                width: 50px;
                height: 30px;
                line-height: 30px;
                text-align: center;
            }
            .right div{
         
                display: none;
            }
            .right .a {
         
                display: block;
            }
        </style>
    </head>
    
    
    <body>
        <div class="box">
            <ul class ="left">
                <li ><a href="#">裙子</a></li>
                <li ><a href="#">小皮鞋</a></li>
                <li ><a href="#">佛珠</a></li>
            </ul>
            <div class ="right">
                <div class="a"><a href="#"><img src="images/q.jpg" width="400px" height="400px"></a></div>
                <div><a href="#"><img src="images/x.jpg" width="400px" height="400px"></a></div>
                <div><a href="#"><img src="images/f.jpg" width="400px" height="400px"></a></div> 
                
            </div>
        </div>
        <script>
            $(function(){
         
                //添加鼠标触发事件
                $(".left li").mouseover(function(){
         
                    //获取索引号
                    var index = $(this).index();
                    //将当前div的背景改成红色
                    $(this).css("background","red");
                    //显示与当前索引号相同的索引号的图片
                    $(".right div").eq(index).show();
                    //隐藏其他图片
                    $(".right div").eq(index).siblings().hide();
                })
                //添加鼠标离开事件
                $(".left li").mouseout(function(){
         
                    //鼠标离开时，去除背景颜色
                    $(this).css("background",""); 
                })
            })   
        </script>
    </body>
    </html>

程序运行结果：

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

[2021010517452799.png_pic_center]: /images/20221119/87ec711e75604ef28834f470e0c037ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/02c936a4c2774934a103a5f4ad13d318.png