<!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>
* {
margin: 0;
padding: 0;
}
.box {
width: 1200px;
height: 400px;
background-color: pink;
margin: 100px auto;
overflow: hidden;
}
.box ul {
list-style: none;
}
.box ul li {
transition: all 1s;
float: left;
width: 240px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><a href="#"><img src="https://img0.baidu.com/it/u=1997330805,2252719449&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""></a></li>
<li><a href="#"><img src="https://img0.baidu.com/it/u=1997330805,2252719449&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""></a></li>
<li><a href="#"><img src="https://img0.baidu.com/it/u=1997330805,2252719449&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""></a></li>
<li><a href="#"><img src="https://img0.baidu.com/it/u=1997330805,2252719449&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""></a></li>
<li><a href="#"><img src="https://img0.baidu.com/it/u=1997330805,2252719449&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""></a></li>
</ul>
</div>
<script>
const lis = document.querySelectorAll('li')
for (let i = 0; i < lis.length; i++) {
lis[i].addEventListener('mouseenter', function () {
for (let j = 0; j < lis.length; j++) {
lis[j].style.width = '100px'
}
this.style.width = '800px'
})
lis[i].addEventListener('mouseleave', function () {
for (let i = 0; i < lis.length; i++) {
lis[i].style.width = '240px'
}
})
}
</script>
</body>
</html>
手风琴格式
最新推荐文章于 2023-12-15 11:30:46 发布