使用JS+CSS实现简单手风琴
效果如下：
代码如下：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
CSS
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
width: 1300px;
}
#box {
width: 1200px;
height: 400px;
border: 2px solid red;
margin: 100px auto;
}
#box li {
width: 240px;
height: 400px;
/* border: 1px solid #000; */
float: left;
/* 设置过渡时间 */
transition: all 1s;
}
</style>
JavaScript
<script>
window.addEventListener('load', function () {
let box = document.querySelector('#box')
let lis = box.querySelectorAll('li')
// 遍历li标签
lis.forEach((items, index) => {
// 给li标签设置背景图片
items.style.backgroundImage = `url(./images/${index + 1}.jpg)`
// 给li标签添加鼠标移入事件
items.addEventListener('mouseenter', function () {
// 排他
// 将所有li标签的宽度设置为100
lis.forEach(items => items.style.width = 100 + 'px')
// 将当前鼠标指定的li标签的宽度设置为800
lis[index].style.width = 800 + 'px'
})
})
// 设置鼠标移出box后将li标签的宽度设置为240
box.addEventListener('mouseleave', function () {
lis.forEach(items => items.style.width = 240 + 'px')
})
})
</script>
