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如何實現手風琴效果的內容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。