先上效果图
直接看代码
<!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;
}
li{
list-style-type: none;
}
.box{
width: 1200px;
height: 400px;
margin: 100px auto;
}
ul{
width: 1200px;
display: flex;
overflow: hidden;
/* background-color: pink; */
/* justify-content:space-between ; */
}
li{
width: 300px;
height: 400px;
display: inline-block;
overflow: hidden;
/* 设置过渡动画 */
transition: all 0.6s;
}
.aaa{
width: 800px;
}
img{
height: 100%;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="./images/1.jpg" alt=""></li>
<li><img src="./images/2.jpg" alt=""></li>
<li><img src="./images/3.jpg" alt=""></li>
<li><img src="./images/4.jpg" alt=""></li>
</ul>
</div>
<script>
let list=document.querySelectorAll('li')
for(let i=0;i<list.length;i++){
// 鼠标经过时,当前li的宽度改为900px,由于是flex弹性盒子,其它li的宽度自动缩减
list[i].addEventListener('mouseover',function(){
this.style.width=900+'px'
})
// 鼠标离开,此盒子的宽度缩减为原来的300px
list[i].addEventListener('mouseout',function(){
this.style.width=300+'px'
})
}
</script>
</body>
</html>