本文实例为大家分享了JavaScript实现手风琴效果的具体代码，供大家参考，具体内容如下
代码：
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >Document</ title >
< style >
* {
margin: 0;
padding: 0;
}
ul {
width: 100%;
text-align: center;
}
ul li {
list-style: none;
overflow: hidden;
display: inline-block;
transition: all 1s;
}
</ style >
</ head >
< body >
< ul >
</ ul >
< script >
var ul = document.querySelector("ul");
var imgs = ["img/img4.jpg", "img/img5.jpg", "img/img6.jpg", "img/img7.jpg", "img/img8.jpg", "img/img9.jpg", ];
for (var i = 0; i < imgs.length ; i++) {
var li = document .createElement("li");
var img = document .createElement("img");
img.src = imgs [i];
li.appendChild(img);
ul.appendChild(li);
}
var lis = document .querySelectorAll("li");
window.onload = window .onresize = function () {
for (var i = 0 ; i < lis.length; i++) {
lis[i].style.width = (ul.offsetWidth / imgs.length) - 10 + "px";
}
}
var imgM = document .querySelectorAll("img");
for (let i = 0 ; i < imgM.length; i++) {
imgM[i] .onmouseenter = function () {
for (var j = 0 ; j < imgM.length; j++) {
lis[j].style.width = ((ul.offsetWidth - imgM[i].offsetWidth) / (imgs.length - 1)) - 10 + "px";
}
lis[i] .style.width = imgM [i].offsetWidth + "px";
}
imgM[i] .onmouseleave = function () {
for (var i = 0 ; i < lis.length; i++) {
lis[i].style.width = (ul.offsetWidth / imgs.length) - 10 + "px";
}
}
}
</script>
</ body >
</ html >
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/weixin_45773503/article/details/113814661
查看更多关于JavaScript实现手风琴效果的详细内容...