''推拉门''动效也可以称作"手风琴"效果，大多数效果实现的思路基本是一样的，下面介绍两种方法，一种是通过改变图片的偏移位置实现移动，另一种是通过遍历背景图片后改变图片的宽度实现变换。
html+css代码
Box">
@H_301_33@
*{
padding: 0;
margin: 0;
}
.Box{
/收缩状态:缩放时每个图片的大小240px 所以总大小1200px/
/展开状态:当前图片宽度800px 其他图片宽度100px/
width: 1200px;
height: 500px;
border:1px solid red;
margin: 50px auto;
}
.Box ul{
list-style: none;
width: 1210px;
}
/设置每一张图片的大小和float: left/
.Box ul li{
width: 240px;
height: 500px;
/background: url(images/slidepic2.jpg);/
float: left;
}
jQuery实现
html+css代码
@H_301_33@
*{
background-color: #aaa;
padding: 0;
margin: 0;
}
ul{list-style: none;}
.picList{
width: 1000px;
height: 400px;
/border:1px solid #eee;/
margin:100px auto;
position: relative;
overflow: hidden;
}
/设置定位属性 所有图片覆盖在起始位置/
.picList ul li{
position: absolute;
width: 1000px;
height: 400px;
top: 0;
}
img{
width: 100%;
height: 400px;
cursor: pointer;
}
jQuery实现
提示：这里使用的是jQuery代码实现，javaScript代码也是一样的可以实现，只是修改下遍历过程和内置函数方法，另外再重写动画函数（前面的笔记有封装好的animate函数，可以直接引入使用）。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
