我们在做开发时经常会遇到类似手风琴特效的需求,虽说现在的类库插件十分漂亮,偶尔有时间还是喜欢写一下原生的特效,欢迎各位评论指正,共同进步!

---

html代码如下:

  <ul>
    <li><img src="imgs/shine.png" alt="pic"></li>
    <li><img src="imgs/peking.png" alt="pic"></li>
    <li><img src="imgs/car.jpg" alt="pic"></li>
    <li><img src="imgs/bmds.jpg" alt="pic"></li>
    <li><img src="imgs/star.jpg" alt="pic"></li>
  </ul>

css代码如下:

ul {
 list-style: none;
 width: 1000px;
 height: 400px;
 margin: 100px auto 20px auto;
 padding: 0;
 border: 5px solid #6f1;
}

li {
  overflow: hidden;
  float: left;
  width: 20%;
  height: 100%;
}

li img {
  display: block;
  width: 600px;
  height: 400px;
}

js代码如下:

const ul = document.querySelector('ul'), 
      aLi = ul.querySelectorAll('li'), len = aLi.length;
  //事件代理给ul  添加鼠标移动事件  
    ul.addEventListener('mouseover', function(ev) {
      if(ev.target.nodeName == 'IMG') {//确定事件源为 img 节点时,DOM结构做出相应改变
        for(let i = 0; i < len; i++) {
          aLi[i].style.transition = 'width 300ms, opacity 500ms'
          aLi[i].style.width = '100px'
          aLi[i].style.opacity = .5
        }
        ev.target.parentElement.style.width = '600px'
        ev.target.parentElement.style.opacity = 1
      }
    })

动画效果如图: