核心思路:①所有图片开始阶段的宽度都是一致的(200px) ②获取元素,添加鼠标经过事件 ③利用循环和排他思想,先让所有图片的宽度变小(100px),再让鼠标指向的那个图片宽度变(600px) ④添加鼠标离开事件,鼠标离开后图片恢复到初始大小(200px)。下面附上实现代码
Html
<!-- ul当中放几个小li嵌套图片即可,注意图片的初始宽高必须设置成一致的 -->
<div class="bigBox">
<ul>
<li>
<img src="./q.jpg" alt="" />
</li>
<li>
<img src="./q4.jpg" alt="" />
</li>
<li>
<img src="./q2.jpg" alt="" />
</li>
<li>
<img src="./q3.jpg" alt="" />
</li>
<li>
<img src="./q.jpg" alt="" />
</li>
<li>
<img src="./q4.jpg" alt="" />
</li>
<li>
<img src="./q2.jpg" alt="" />
</li>
</ul>
</div>
Css
<style>
.bigBox {
width: 1500px;
height: 1000px;
margin: 100px auto;
}
li {
float: left;
list-style: none;
}
li img {
width: 200px;
height: 400px;
transition: 0.5s all; //添加过度效果,使手风琴效果更美观
}
</style>
javaScript
<script>
let lis = document.querySelectorAll(".bigBox img"); //获取每个图片
//利用for循环为每个图片添加事件
for (let i = 0; i < lis.length; i++) {
// 鼠标经过
lis[i].addEventListener("mouseenter", function () {
// 怕他思想,让所有小li宽度全部变为100px,鼠标指向那个宽度变为600px
for (let j = 0; j < lis.length; j++) {
lis[j].style.width = "100px";
}
// 让选中的变为600px
lis[i].style.width = "600px";
});
// 鼠标离开
lis[i].addEventListener("mouseleave", function () {
for (let j = 0; j < lis.length; j++) {
lis[j].style.width = "200px";
}
});
}
</script>