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

文章目录

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

案例：淘宝服饰精品案例

淘宝服饰精品案例分析

核心原理：鼠标经过左侧盒子某个小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>Documenttitle>
  <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>
  
  <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142

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

案例：新浪下拉菜单

在这里插入图片描述

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

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>Documenttitle>
    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146

相关阅读:
Vue中如何进行自定义图表与可视化图形设计
 Qt代码如何使用QPointer替换普通指针，让代码更舒服？
阿里家代码规范学习笔记
 String 在创建时究竟创建了几个对象
 9.20华为机试-后端
 SSM毕设项目 - 基于SSM的房屋出租出售系统(含源码+论文)
Jenkins+GitLab远程部署SpringCloud微服务
 【STM32】入门（一）：环境搭建、编译、下载、运行
 计算机网络期末复习（1）计算机网络在信息时代对的作用计算机网络的定义和分类三种交换方法
 vue3项目使用TypeIt打字机
原文地址：https://blog.csdn.net/weixin_51249285/article/details/125896366