JavaScript实现手风琴效果

这篇文章主要为大家详细介绍了JavaScript实现手风琴效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

这篇文章主要为大家详细介绍了JavaScript实现手风琴效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JavaScript实现手风琴效果的具体代码，供大家参考，具体内容如下

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>