JS原生制作手风琴特效

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

---

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;
  w