手风琴-js+css - 技术栈

html 复制代码
<template>
  <div>
    <div class="pics">
      <ul id="picList">
        <li><a href="#"><img src="../assets/images/researchOne.webp" alt=""></a></li>
        <li><a href="#"><img src="../assets/images/researchTwo.webp" alt=""></a></li>
        <li><a href="#"><img src="../assets/images/researchThree.webp" alt=""></a></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    let ul = document.getElementById("picList");
    let lies = ul.children ;
    // 第一个 li 变宽：增加类 active
    lies[1].classList.add("active");
    // 查找兄弟标签函数
    let findSiblings = function(tag){
      let parent = tag.parentNode ;
      let child = parent.children ;
      let sb = [];
      for(let i = 0 ; i <= child.length-1 ; i++ ){
        if( tag !== child[i]){
          sb.push( child[i]);
        }
      }
      return sb ;
    };
    
    for( let i = 0 ; i <= lies.length-1 ; i++  ){
      lies[i].addEventListener("mouseenter",function(){
        let siblings = findSiblings(this);
        // 当前标签变宽: 增加类 active
        this.classList.add("active");
        // 兄弟标签变窄
        for(let k = 0 ; k <= siblings.length-1 ; k++ ){
          // 兄弟标签去掉 active
          siblings[k].classList.remove("active");
        }
      });
    }
  },
};
</script>

<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
}
ul,li,ol{
  list-style: none;
}
img{
  border:none;
}
/* 公用css 结束 */
 
.pics{
  width: 1000px; /* 1个 600px，4个 100px*/
  margin-left: auto;
  margin-right: auto;
  height: 400px;
  overflow: hidden;
}
.pics ul{
  display: flex;    /* flex 布局让 li 横向排列 */
  justify-content: space-between;  /* 内容靠向两端 */
}
.pics ul li{
  width: 200px;
  height: 400px;
  position: relative;
  overflow: hidden;
  transition:all 0.4s;   /* 过渡动画 */
  flex-grow: 1;   /* 让 li 始终能占满整个 ul ，保证变化过程中 li 之间没有缝隙 */
  margin-left: 15px;
}
.pics ul li img{
  position: absolute;   /* 确保图片在 li 里显示中间部分 */
  left:50%;
  top:0;
  margin-left: -300px;
}
.pics ul li.active{    /* 有类 active li 宽度为 600px。去掉，就会恢复 100px */
  width: 600px;
}
</style>
参考：JavaScript 练手小案例：超级简单又炫酷的图片手风琴效果_图片手风琴效果 js-CSDN博客