html5怎么产生手风琴效果,Html5 js实现手风琴效果

摘要：使用H5实现横向的手风琴功能html>

&nbs

使用H5实现横向的手风琴功能html>

* {

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;

}

h3 {

width: 50px;

float: left;

height: 222px;

border: 1px solid green;

box-sizing: border-box;

}

img {

width: 0px;

float: left;

}

.img {

width: 220px;

}

• 1

• 2

• 3

• 4

• 5

• 6

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

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

for(var i = 0; i 

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

lis[i].onclick = function () {

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

for(var i = 0; i 

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

}

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

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

}

}

更多关于Html5 js实现手风琴效果请关注PHP中文网(www.php.cn)其他文章！