JS——手风琴|鼠标悬停图片滚动展示栏 [技术栈:html、css、JavaScript]

效果图：

在这里插入图片描述

代码：


DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>手风琴title>
  <style>
    ul {
      list-style: none;
    }

    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 1200px;
      height: 400px;
      margin: 50px auto;
      border: 1px solid red;
      overflow: hidden;
    }

    div li {
      width: 240px;
      height: 400px;
      float: left;
      transition: all 1000ms; /*过渡*/
    }

    div ul {
      width: 1200px;
    }
  style>
head>

<body>
  <div id="box">
    <ul>
      <li>
        <a href="#">
          <img src="./images/1.jpg" alt="">
        a>
      li>
      <li>
        <a href="#">
          <img src="./images/2.jpg" alt="">
        a>
      li>
      <li>
        <a href="#">
          <img src="./images/3.jpg" alt="">
        a>
      li>
      <li>
        <a href="#">
          <img src="./images/4.jpg" alt="">
        a>
      li>
      <li>
        <a href="#">
          <img src="./images/5.jpg" alt="">
        a>
      li>
    ul>
  div>
body>
<script>
	/*预期分析：1鼠标经过的小li宽度变大为800px，其他变100px
	2鼠标离开时，所有小li都要复原宽度*/
	
	//(1)获取元素
	let lis = document.querySelectorAll('li')
	//(2)绑定鼠标经过和离开事件
	for (let i = 0; i < lis.length; i++) {
		//(3)鼠标经过
		lis[i].addEventListener('mouseenter',function(){
			//排他思想，干掉所有，复活自己
			for (let j = 0; j < lis.length; j++) {
				lis[j].style.width = '100px'
			}
			this.style.width = '800px'
		})
		
		//(4)鼠标离开
		lis[i].addEventListener('mouseleave',function(){
			for (let j = 0; j < lis.length; j++) {
				lis[j].style.width = '240px'
			}
		})
		
	}
	


script>

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

相关阅读:
LVS+KeepAlived高可用负载均衡集群
出行计划（2023寒假每日一题 16）
基于图的路径搜索技术基础知识
微信小程序实验案例：简易成语小词典
java计算机毕业设计基于springboo个人家庭理财记账管理系统
【TcaplusDB知识库】Tmonitor单机安装指引介绍（二）
仿游戏热血江湖游戏类22（得到物品基本攻击力2）
使用cpolar发布群晖NAS上的网页上篇（7.X版）
C语言变量的作用域
Rockland丨Rockland 抗体修饰-抗体偶联方案

原文地址：https://blog.csdn.net/weixin_53920044/article/details/127773432