滑动的动态效果可以称为手风琴效应，大多数效果的实现基本上是相同的，这里有两种方法，一种是通过偏移位置改变画面，另一种是通过改变画面的背景图像宽度来实现变换。
推拉门收缩状态。
推拉门扩展状态。
推拉门的实现方法1：改变图片的宽度
html代码
（图片/ slidepic2 .jpg）--> { }！
* {
填充：0；
保证金：0；
}
箱{。
每一缔约国： / *缩放图片的大小240px使1200px * 总规模/
开始状态：当前图片 / *宽800px宽度100px * /其他图片
宽度：1200px；
身高：500px；
border: 1px solid红；
保证金：50px汽车；
}
框{ {
列表样式：无；
宽度：1210px；
}
设置每张图片和浮动的大小：左*
盒子
宽度：240px；
身高：500px；
/ *背景：URL（图像/ slidepic2 .jpg）；* /
浮点数：左；
}
jquery实现
$（函数（）{（））
1遍历每个李以获取每个元素的对应图片。
VaR LIS =美元（李的）；
lis.each（函数（指数、元）{
通过设置名称更改背景图像图片显示
无功imgname =图像/ slidepic+（指数+ 2）+.jpg；
$（元）。Css（背景、URL（+ imgname + ））
}）；
2。扩张状态
鼠标滑入相应的图片宽度800张其他图片（兄弟）到100。
Lis.mouseenter（function（）{（）
console.log（本）； / /李目前DOM元
当前图片更改宽度为800
$（这个）。停止（）动画（{宽度：800 }）；
另一幅图片的宽度为100
$（这），兄弟姐妹（李的）。停止（）。动画（{宽度：100 }）；
}）；
3鼠标滑出都显示为收缩。
Lis.mouseout（function（）{（）
Lis.stop（），动画（{宽度：240 }）；
}）；
}）
推拉门实现方法二：改变图片的偏移值
html代码
（图片/ slidepic8 .jpg）{ }！
（图片/ slidepic3 .jpg）{ }！
（图片/ slidepic4 .jpg）{ }！
（图片/ slidepic5 .jpg）{ }！
（图片/ slidepic7 .jpg）{ }！
* {
背景颜色：# AAA；
填充：0；
保证金：0；
}
列表样式：无；}
piclist {。
宽度：1000px；
身高：400px；
/ *边框1px solid * # Eee；
保证金：100px汽车；
职位：相对；
溢出：隐藏；
}
在开始位置设置位置属性，所有图片覆盖范围。
piclist ul {。
位置：绝对；
宽度：1000px；
身高：400px；
顶部：0；
}
img {
宽度：100%；
身高：400px；
光标：指针；
}
jquery实现
$（函数（）{（））
1获得所有设置初始收缩状态的图片：i * 200
VaR LIS =美元（李的）；
对于（var i = 0；i < lis.length；i++）{
Lis.eq（我）。Css（{左：我* 200 + 'px}）；
}
2。设置悬停内置函数以将鼠标滑动到展开和收缩效果中。
Lis.hover（function（）{（）
var（=）。
在2.1鼠标滑动后，当前图像的前图像偏移位置减少到J * 100位置。
对于（var j = 0；j <索引；j + +）{
lis.eq（J），停止（）。动画（{左：J×100 + 'px}，300）；
}
在2.2鼠标滑动后，当前图像后面的图像的偏移位置被扩展到500 + J * 100位置。
对于（var j =指数+ 1；J < lis.length；j++）{
lis.eq（J），停止（）。动画（{左：500 + J×100 + 'px}，300）；
}
}在函数（）2.3鼠标滑动后，所有图片都恢复到原来的位置，我* 200
对于（var i = 0；i < lis.length；i++）{
Lis.eq（我），停止（）。动画（{左：我* 200 + 'px}，300）；
}
}）；
}）
注意：在执行过程中，注意图片的宽度和名称的设置。
注意：这里是jQuery代码的使用，javaｓｃｒｉｐｔ代码是可以实现的，只需修改遍历过程和内置函数的方法，除了重写函数（在动画功能的前面，可以直接打包使用）。
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。