JS原生制作手风琴特效
作者:互联网
我们在做开发时经常会遇到类似手风琴特效的需求,虽说现在的类库插件十分漂亮,偶尔有时间还是喜欢写一下原生的特效,欢迎各位评论指正,共同进步!
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