| |
<!DOCTYPE html> |
| |
<html lang="en"> |
| |
|
| |
<head> |
| |
<meta charset="UTF-8"> |
| |
<title>横向手风琴</title> |
| |
<style> |
| |
* {margin: 0;padding: 0;} |
| |
.container { |
| |
width: 1000px; |
| |
height: 400px; |
| |
margin: 0 auto; |
| |
margin-top: 120px; |
| |
box-shadow: 0 0 4px black; |
| |
} |
| |
/* 关键点就是将ul设置为弹性盒，然后通过flex-grow来对每个li进行控制 */ |
| |
ul { |
| |
width: 100%; |
| |
height: 100%; |
| |
list-style: none; |
| |
display: flex; |
| |
} |
| |
li { |
| |
width: 70px; |
| |
height: 100%; |
| |
overflow: hidden; |
| |
transition: .5s; |
| |
} |
| |
.current{ |
| |
flex-grow: 10; /* 将当前的li的flex-grow值设置为10 */ |
| |
} |
| |
</style> |
| |
</head> |
| |
|
| |
<body> |
| |
<div class="container"> |
| |
<ul> |
| |
<li class="current"><img src="./img/1.jpg" alt="" height="400"></li> |
| |
<li><img src="./img/2.jpg" alt="" height="400"></li> |
| |
<li><img src="./img/3.jpg" alt="" height="400"></li> |
| |
<li><img src="./img/4.jpg" alt="" height="400"></li> |
| |
<li><img src="./img/5.jpg" alt="" height="400"></li> |
| |
</ul> |
| |
</div> |
| |
<script> |
| |
// 获取DOM元素 |
| |
let li = document.getElementsByTagName("li"); |
| |
let container = document.getElementsByClassName("container")[0]; |
| |
let enter = function () { |
| |
// 首先使用for循环将所有的li的class值给清空 |
| |
for(let i=0;i<li.length;i++) |
| |
{ |
| |
li[i].className = ""; |
| |
} |
| |
// 然后再将当前的li的class赋值为current |
| |
this.className = "current"; |
| |
} |
| |
// 通过for循环给所有的li添加mouseenter事件 |
| |
for (let i = 0; i < li.length; i++) { |
| |
li[i].addEventListener("mouseenter", enter, false); |
| |
} |
| |
</script> |
| |
</body> |
| |
|
| |
</html> |
