Html5 js实现手风琴效果
使用H5实现横向的手风琴功能，供大家参考，具体内容如下
<!DOCTYPEhtml>
<html>
<headlang="en">
<metacharset="UTF-8">
<title></title>
<style>
*{
padding:0;
margin:0;
}
div{
width:522px;
height:222px;
margin:50pxauto;
border:1pxsolidred;
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:1pxsolidgreen;
box-sizing:border-box;
}
img{
width:0px;
float:left;
}
.img{
width:220px;
}
</style>
</head>
<body>
<div>
<ul>
<li><h3>1</h3><imgsrc="images/01.jpg"alt=""/></li>
<li><h3>2</h3><imgsrc="images/02.jpg"alt=""/></li>
<li><h3>3</h3><imgsrc="images/03.jpg"alt=""/></li>
<li><h3>4</h3><imgsrc="images/04.jpg"alt=""/></li>
<li><h3>5</h3><imgsrc="images/01.jpg"alt=""/></li>
<li><h3>6</h3><imgclass="img"src="images/02.jpg"alt=""/></li>
</ul>
</div>
<script>
varlis=document.querySelectorAll("li");
varimgs=document.querySelectorAll("img");
for(vari=0;i<lis.length;i++){
//给所有的li标签添加点击事件
lis[i].onclick=function(){
//将所有的图片宽度设置为0
for(vari=0;i<lis.length;i++){
imgs[i].style.width="0px";
}
//将当前点击li标签中的img标签设置宽度为220px
this.querySelector("img").style.width="220px";
}
}
</script>
</body>
</html>
下载链接：H5实现手风琴
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。