jQuery如何实现手风琴效果

这篇文章主要介绍了jQuery如何实现手风琴效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

成都创新互联2013年开创至今，先为肃南裕固族自治等服务建站，肃南裕固族自治等地企业，进行企业商务咨询服务。为肃南裕固族自治企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

本文实例为大家分享了jQuery实现手风琴效果的具体代码，供大家参考，具体内容如下

代码：

 
 
 
  *{
   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);
  }