JS原生制作手风琴特效

互联网 2021/10/13 23:14:24

我们在做开发时经常会遇到类似手风琴特效的需求,虽说现在的类库插件十分漂亮,偶尔有时间还是喜欢写一下原生的特效,欢迎各位评论指正,共同进步!html代码如下:<ul><li><img src="imgs/shine.png" alt="pic"></li><li>&l…

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


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

动画效果如图:

 

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[JS原生制作手风琴特效]http://www.zyiz.net/tech/detail-241050.html

上一篇:Python | JSON 数据解析(Json & JsonPath)

下一篇:react介绍+脚手架+语法+组件+事件+state

赞(0)
关注微信小程序
程序员编程王-随时随地学编程

扫描二维码或查找【程序员编程王】

可以随时随地学编程啦!

技术文章导航 更多>
扫一扫关注最新编程教程