手风琴图片滑动是我最近学的一个图片的效果，感觉不错，分享给大家。
最终效果见 ：http://gjhnstxu.me/squeezebox/demo.html
详细代码如下：
html代码：
<!DOCTYPE html>
<html lang="en"><head> <meta charset="UTF-8"> <title>手风琴图片</title> <link rel="stylesheet" type="text/css" href="demo.css"> <script type="text/javascript" src = "jquery.js"></script> <script type="text/javascript" src = "demo.js"></script></head><body> <div id="pic"> <ul> <li class="pic1"> <a href="#"> <div class="txt"> <p class="p1">作者： 默默的沫沫</p> <p class="p2">我的个人拉萨之旅 || 日光之城</p> </div> </a> </li> <li class="pic2"> <a href="#"> <div class="txt"> <p class="p1">作者： 默默的沫沫</p> <p class="p2">我的个人成都之旅 || 美食之城</p> </div> </a> </li> <li class="pic3"> <a href="#"> <div class="txt"> <p class="p1">作者：默默的沫沫</p> <p class="p2">我的个人丽江之旅 || 艳遇之城</p> </div> </a> </li> <li class="pic4"> <a href="#"> <div class="txt"> <p class="p1">作者： 默默的沫沫</p> <p class="p2">我的个人南昌之旅 || 火热之城</p> </div> </a> </li> </ul> </div></body></html>css代码：
*{
padding: 0px; margin: 0px; font-family: "微软雅黑"; list-style-type: none;}a{ text-decoration: none;}#pic{ width: 1100px; height: 440px; margin-top: 70px; /*border: solid 1px red;*/}#pic ul li{ float: left; width: 100px; height: 440px;}#pic ul .pic4{ width: 800px;}.pic1{ background-image: url(img/1.jpg);}.pic2{ background-image: url(img/2.jpg);}.pic3{ background-image: url(img/3.jpg);}.pic4{ background-image: url(img/4.jpg); width: 800px;}.txt{
background-color: #000; background: rgba(0,0,0,0.5); height: 440px; width: 100px;}.txt p{ float: left; color: #fff;}.txt .p1{ font-size: 12px; width: 12px; //将文字大小和p1的宽度设为一样，就可以有文字呈一列显示的效果 padding: 25px 25px 0px 20px;}.txt .p2{ font-size: 14px; width: 14px; padding-top: 25px;}js代码：
$(function(){
$("#pic ul li").mouseover(function(){ $(this).stop(true).animate({width:"800px"},1000).siblings().stop(true).animate({width:"100px"},1000); //animate()可以使图片滑动具有动画效果，stop(true)是图片滑动更加流畅，不加stop()则图片的反应比较慢 });});