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

html代码如下:

  <ul>
    <li><img src="imgs/CAR.png" alt="pic"></li>
    <li><img src="imgs/car.png" alt="pic"></li>
    <li><img src="imgs/car2.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
   }
});
//事件代理给ul  添加鼠标移出事件  
ul.addEventListener('mouseout', function() {
   for(let i = 0; i < len; i++) {
     aLi[i].style.width = '200px';
     aLi[i].style.opacity = 1;
   }
})

动画效果如图: