本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容