JS原生制作手风琴特效

2021-10-13 23:04:35 阅读：179 来源： 互联网

标签：特效 style width aLi JS ul li 手风琴 ev

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

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
      }
    })

动画效果如图:

标签：特效,style,width,aLi,JS,ul,li,手风琴,ev
来源： https://blog.csdn.net/sv_Reg/article/details/120753739

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JS原生制作手风琴特效