Html5 js如何实现手风琴效果

发布时间：2020-08-03 09:54:10

来源：亿速云

阅读：92

作者：小猪

这篇文章主要为大家展示了Html5 js如何实现手风琴效果，内容简而易懂，希望大家可以学习一下，学习完之后肯定会有收获的，下面让小编带大家一起来看看吧。

* {

padding: 0;

margin: 0;

}

div {

width: 522px;

height: 222px;

margin: 50px auto;

border: 1px solid red;

box-sizing: border-box;

box-sizing: border-box;

}

ul {

overflow: hidden;

height: 222px;

}

li {

float: left;

height: 222px;

list-style: none;

box-sizing: border-box;

}

h4 {

width: 50px;

float: left;

height: 222px;

border: 1px solid green;

box-sizing: border-box;

}

img {

width: 0px;

float: left;

}

.img {

width: 220px;

}

var lis = document.querySelectorAll("li");

var imgs = document.querySelectorAll("img");

for(var i = 0; i < lis.length; i++) {

//给所有的li标签添加点击事件

lis[i].onclick = function () {

//将所有的图片宽度设置为0

for(var i = 0; i < lis.length; i++) {

imgs[i].style.width = "0px";

}

//将当前点击li标签中的img标签设置宽度为220px

this.querySelector("img").style.width = "220px";

}

}

以上就是关于Html5 js如何实现手风琴效果的内容，如果你们有学习到知识或者技能，可以把它分享出去让更多的人看到。