JS实现画面手风琴效果

“推拉门”的移动效果也可以称为“手风琴”效果，大部分效果基本相同。这里有两种方法，一种是通过改变图片的偏移位置来移动，另一种是遍历背景图片后改变图片的宽度。

滑动门收缩状态。巴布亚新几内亚

“滑动门”的展开状态。巴布亚新几内亚

“推拉门”的实现方法1:改变图片宽度

Html css代码

body div class='box' ul！-李！[](images/slide pic 2 . jpg)/Li-Li/Li Li/Li Li/Li Li/Li/ul/div/body style * { padd : 0；margin : 0；} .box{ /*缩小状态：缩放时，每张图片的大小为240px，所以总大小为1200 px */*展开状态：当前图片宽度为800px，其他图片宽度为100 px */width : 1200 px；高度： 500 px；border:1px纯红；margin: 50px自动；} .box ul { list-style : none；宽度： 1210 px；}/*设置每张图片的大小并向左浮动： */。box ul Li {宽度： 240 px高度： 500 px；/* background : URL(images/slide pic 2 . jpg)；*/float:左侧；} /stylejQuery实现

script src=' jquery-3 . 2 . 1 . js '/script script $(function(){//1)遍历每个li，得到每个元素设置var lis=$('li ')对应的图片；Lis。每个(函数(index，element){//通过设置背景图片的名称var imgname=' images/slide pic '(index 2)来更改图片的显示。jpg '；$(元素)。css('background '，' URL(' imgName ' ')'))})；//2.展开状态//将鼠标滑入，改变相应图片的宽度800。其他图片(兄弟)改为100 lis。mouse enter(function(){//console。日志(这个)；当前li DOM元素//当前图片的宽度变为800 $(这个)。停止()。动画({ width : 800 })；//其他图片宽度变成100 $(这个)。兄弟姐妹(' li ')。停止()。动画({ width : 100 })；});//3当鼠标滑出时，全部显示为收缩lis。mouseout (function () {lis。停止()。动画({ width : 240 })；});})/脚本‘推拉门’实现方法二：改变图片的偏移值

Html css代码

body div class=' picList ' ul li！[](images/slidepic8.jpg)/li li！[](images/slidepic3.jpg)/li li！[](images/slidepic4.jpg)/li li！[](images/slidepic5.jpg)/li li！[](images/slide pic 7 . jpg)/Li/ul/div/body style * { background-color : # AAA；padd : 0；margin : 0；} ul { list-style : none；} .picList { width: 1000px高度： 400 px；/*border:1px实心# eee*/margin :100 px auto；相对位置：飞越：隐藏；}/*设置定位属性。所有图片都覆盖在起始位置*/。piclist ul li {位置：绝对；宽度： 1000 px；高度： 400 px；top : 0；} img { width : 100%；高度： 400 px；cursor:指针；}/stylejQuery实现

script src=' jquery-3 . 2 . 1 . js '/script script $(function(){//1获取所有图片的初始收缩状态left : I * 200 var lis=$(' Li ')；for(var I=0；一.长度；i ){ lis.eq(i)。CSS({ left : I * 200 ' px ' })；} //2.设置悬停内置功能，实现鼠标滑入、展开、滑出、收缩效果列表。悬停(function () {var index=$ (this))。index()；//DOM对象转换jQuery对象//2.1鼠标滑入后，当前图片正面图片的偏移位置缩小为j*100位置为(var j=0；j=指数；j ){ lis.eq(j)。停止()。动画({left: j*100 'px'}，300)；} //2.2鼠标滑入后，当前图片后图的偏移位置扩展到500 j*100位置为(var j=index 1；j lis.lengthj ){ lis.eq(j)。停止()。动画({left: 500 j*100 'px'}，300)；} }，function(){ //2.3鼠标滑出后，所有图片都回到原来的位置I * 200 for(var I=0；一.长度；i ){ lis.eq(i)。停止()。动画({left: i*200 'px'}，300)；} });})/脚本注意：方法一实施过程中，注意宽度和图片命名的设置。

提示：这里用的是jQuery代码，javaScript代码也可以用同样的方式实现，只不过修改了遍历过程和内置函数方法，并重写了动画函数(前面的注释有封装的动画函数，可以直接引入使用)。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。