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>
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• 纯js实现手风琴效果代码
• 原生js做的手风琴效果的导航菜单
• 使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
• Vue.js手风琴菜单组件开发实例
• js实现简单的手风琴效果
• js实现可折叠展开的手风琴菜单效果
• 纯js实现手风琴效果
• 原生JS实现垂直手风琴效果
• 炫酷的js手风琴效果
• JS实现图片手风琴效果

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！