本文的例子分享了推拉门效果的具体代码，供大家参考。具体内容如下

推拉门效果：

原则：

总共有四扇门。最初，第一扇门是打开的，其他三扇门是关闭的，如第一个图所示。假设图片的宽度是120px，另外三扇门的曝光宽度是80px。在初始状态下，第二门左边的距离为120px，第三门左边的距离为200px，第四门左边的距离为280px。当第二门打开时，第二门左边的距离为80px，为(120-40)px，第三和第四门左边的距离保持不变。第三扇门打开时，第二扇门左边的距离是80px，第三扇门左边的距离是160px。(200-40)PX第四门不变

因此，当每扇门打开时，它是图片的宽度减去暴露的宽度，这是需要向左移动的距离。当第三扇门打开时，第二扇门需要先移动，然后第三扇门移动。每扇门移动的距离是图片的宽度减去曝光的宽度。

程序：

脚本类型=' text/JavaScript ' window . onload=function(){ var container=document . getelementbyid(' container ')；var imgs=container . getelementsbytagname(' img ')；//获取图像var imgwidth=imgs [0]。偏移；//图片的宽度var exposeWidth=200//暴露宽度var容器宽度=imgwidthexpose宽度* (imgs)。长度-1)；//外箱容器的总宽度. style.width=容器宽度' px '；函数Initial(){ for(var I=1；i imgs.lengthI){ imgs[I]. style . left=imgWidth exposewith *(I-1)' px '；} } Initial()；var translate width=IMgwidth-expose width；//的移动距离(var I=0；i imgs.lengthi ) {(函数i) { imgs[i]。onmouseover=function(){ Initial()；//鼠标经过图片时，先将其设置为初始状态为(var j=1；j=I；J) {//前面的图片都移动相同的距离imgs [j]。风格。left=Parsent(imgs[j])。风格。左)-平移宽度“px”；} } })(I)；} }/脚本以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。