888 案例：淘宝服饰精品案例，新浪下拉菜单案例（使用 jQuery）

本文链接：https://blog.csdn.net/weixin_51249285/article/details/125896366

本文介绍了两个JavaScript交互案例：一是淘宝服饰精品展示，通过鼠标悬停显示对应图片；二是新浪下拉菜单，鼠标经过显示子菜单。案例详细解析了如何利用jQuery获取元素索引并实现动态效果，为前端开发提供了实践参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

- - 案例：淘宝服饰精品案例
  - 案例：新浪下拉菜单

案例：淘宝服饰精品案例

淘宝服饰精品案例分析

核心原理：鼠标经过左侧盒子某个小li，就让内容区盒子相对应图片显示，其余的图片隐藏。
需要得到当前小li 的索引号，就可以显示对应索引号的图片
jQuery 得到当前元素索引号 $(this).index()
中间对应的图片，可以通过 eq(index) 方法去选择
显示元素 show() 隐藏元素 hide()

在这里插入图片描述

图片素材可以选用其他的图片代替使用，这里就不放素材图片了

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
      font-size: 12px;
    }

    ul {
      /* 设置列表项目样式不使用项目符号 */
      list-style: none;
    }

    a {
      /* 去掉下划线 */
      text-decoration: none;
    }

    .wrapper {
      width: 250px;
      height: 248px;
      margin: 100px auto 0;
      border: 1px solid pink;
      /* 右边框 */
      border-right: 0;
      /* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */
      overflow: hidden;
    }

    #left,
    #content {
      /* 元素浮动在其所在的块容器左侧 */
      float: left;
    }

    #left li {
      /* repeat-x; 横向铺满 */
      background: url(../code/12-精品展示案例/images/lili.jpg) repeat-x;
    }

    

    #left li a {
      /* 将元素显示为块级元素  将内联元素a转换为块状元素 */
      /* 2、块级元素独占一行  元素的高度、宽度、行高以及顶和底边距都可设置。 */
      display: block;
      width: 48px;
      height: 27px;
      border-bottom: 1px solid pink;
      line-height: 27px;
      text-align: center;
      color: black;
    }

    /* 鼠标经过列表 a */
    #left li a:hover {
      background-image: url(../code/12-精品展示案例/images/abg\(1\).gif);
    }

    #content {
      border-left: 1px solid pink;
      border-right: 1px solid pink;
    }

  </style>
  <script src="jquery.min.js"></script>
  <script>
    $(function() {
      // 1 鼠标经过左侧小li
      // $("#left li") 获取左边小li 然后绑定经过事件 mouseover
      $("#left li").mouseover(function() {
        // 2 得到当前小li 的索引号 
        // $(this) 获取当前元素 index() 得到索引号
        var index = $(this).index();
        console.log(index);
        // 3 让我们右侧的盒子相应索引号的图片显示
        $("#content div").eq(index).show();
        // 4 让其余的图片隐藏  就是隐藏他其他的兄弟
        $("#content div").eq(index).siblings().hide();

      })
    })
  </script>
</head>
<body>
  <!-- 整体封装 wrapper -->
  <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>

    <!-- 右边列表 -->
    <div id="content">

      <div>
        <a href="#"><img src="../code/12-精品展示案例/images/女靴.jpg" alt="" width="200" height="250"></a>
      </div>
      <div>
        <a href="#"><img src="../code/12-精品展示案例/images/雪地靴.jpg" alt="" width="200" height="250"></a>
      </div>
      <div>
        <a href="#"><img src="../code/12-精品展示案例/images/冬裙.jpg" alt="" width="200" height="250"></a>
      </div>
      <div>
        <a href="#"><img src="../code/12-精品展示案例/images/呢大衣.jpg" alt="" width="200" height="250"></a>
      </div>
      <div>
        <a href="#"><img src="../code/12-精品展示案例/images/毛衣.jpg" alt="" width="200" height="250"></a>
      </div>
      <div>
        <a href="#"><img src="../code/12-精品展示案例/images/棉服.jpg" alt="" width="200" height="250"></a>
      </div>
      <div>
        <a href="#"><img src="../code/12-精品展示案例/images/女裤.jpg" alt="" width="200" height="250"></a>
      </div>
      <div>
        <a href="#"><img src="../code/12-精品展示案例/images/羽绒服.jpg" alt="" width="200" height="250"></a>
      </div>
      <div>
        <a href="#"><img src="../code/12-精品展示案例/images/牛仔裤.jpg" alt="" width="200" height="250"></a>
      </div>

    </div>
  </div>
</body>
</html>

显示：
在这里插入图片描述

案例：新浪下拉菜单

在这里插入图片描述

鼠标放在微博上，显示下面列表

eg. 09-新浪下拉菜单.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        a {
            text-decoration: none;
            font-size: 14px;
        }
        
        .nav {
            margin: 100px;
        }
        
        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }
        
        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }
        
        .nav>li>a:hover {
            background-color: #eee;
        }
        
        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        
        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }
        
        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        $(function() {
        // 鼠标经过微博ul>li就显示列表ul
        $(".nav>li").mouseover(function() {
          //  $(this) jQuery 当前元素 this不用加引号
          // 当前元素的孩子就是 微博a 和 列表ul，我们要显示列表
          // show() 显示元素  hide() 隐藏元素
          $(this).children("ul").show();
        })

        // 鼠标离开隐藏列表
        $(".nav>li").mouseout(function() {
          $(this).children("ul").hide();
        })
      })
    </script>
</body>

</html>