简单实现jQuery手风琴效果方法分享

 .li_list {
 width: 100px;
 height: 300px;
 list-style: none;
 float: left;
 overflow: hidden;
 }

 .li_list img {
 width: 100%;
 height: 100%;
 }

 .pbg {
 width: 600px;
 height: 300px;
 background: rgba(230, 0, 0, 0.5);
 text-align: center;
 line-height: 300px;
 float: left;
 }

 .pbg span {
 display: block;
 width: 100px;
 height: 300px;
 float: left;
 }

 .p1 {
 width: 500px;
 height: 300px;
 float: left;
 }
 .mo{
 width: 600px;
 }

<ul class="ul_list">
 <li class="li_list">
 <p class="pbg">
 <span>萌宠</span>
 <p class="p1">
 <img src="img/0.jpg" />
 </p>
 </p>
 </li>
 <li class="li_list">
 <p class="pbg">
 <span>萌宠</span>
 <p class="p1">
 <img src="img/1.jpg" />
 </p>
 </p>
 </li>
 <li class="li_list">
 <p class="pbg">
 <span>萌宠</span>
 <p class="p1">
 <img src="img/2.jpg" />
 </p>
 </p>
 </li>
 <li class="li_list mo">
 <p class="pbg">
 <span>萌宠</span>
 <p class="p1">
 <img src="img/3.jpg" />
 </p>
 </p>
 </li>
 </ul>