这篇文章主要介绍了jQuery如何实现手风琴效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
成都创新互联2013年开创至今，先为肃南裕固族自治等服务建站，肃南裕固族自治等地企业，进行企业商务咨询服务。为肃南裕固族自治企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
本文实例为大家分享了jQuery实现手风琴效果的具体代码，供大家参考，具体内容如下
代码：
Document
*{
padding:0;
margin:0;
}
ul,ol{
list-style: none;
}
.box{
width: 900px;
height: 300px;
border:1px solid #333;
margin:50px auto;
position: relative;
overflow: hidden;
}
.box ul li{
position: absolute;
width: 560px;
height: 300px;
top:0px;
}
.box ul li.no0{
left:0px;
}
.box ul li.no1{
left:180px;
}
.box ul li.no2{
left:360px;
}
.box ul li.no3{
left:540px;
}
.box ul li.no4{
left:720px;
}
/*蒙版效果*/
.mask{
position: absolute;
width: 560px;
height: 300px;
top:0;
left: 0;
background-color: rgba(0,0,0,.5);
}
