本文主要详细介绍用JavaScript实现的推拉门效果。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享JavaScript实现推拉门效果的具体代码，供大家参考。具体内容如下
一、什么是滑动门
首先你要知道什么是推拉门。
生活中，我们经常会看到一些网站或者商场有推拉门2的效果
那么如何实现一个简单的推拉门网页效果呢？下面简单分享一下方法。
二、实现滑动门所需技术
1.简单的HTML基础知识
2.简单的CSS基本样式
3.基本的javascript知识
三、如何实现滑动门（重点）
准备一段HTML代码
div id='容器'
img src=' images/20190503222903 . png '！-图片可以自己修改-
img src=' images/20190503222943 . png '/
img src=' images/20190503223003 . png '/
img src=' images/20190503223514 . png '/
/div
向当前HTML结构添加样式
*{
边距：0；
填充：0；
背景色：# ccc
}
p{
文本对齐：居中；
}
#容器{
宽度：1130px
高度：350px
边距：0自动；
边框-右侧：1px solid # FF0000
边框-底部：1px solid # FF0000
溢出：隐藏；
位置：相对；
}
#集装箱img{
宽度：500px
高度：350px
显示：块；
位置：绝对；
border-bottm:1px solid # ff 0000；
}
最后用js代码实现效果。
//加载dom树
window.onload=function(){
//定义框
var box=document.getElementById('容器')；
//定义图片
var imgs=box . getelementsbytagname(' img ')；
//图像宽度
var imgWidth=imgs[0]。offsetWidth
//隐藏宽度
var exposeWidth=210
//框宽
var box width=img width(imgs . length-1)* expose width；
box . style . width=' px '；
//设置每个门的初始位置
函数SetImgsPos(){
for(var I=1；iimgs.lengthi ){
imgs[I]. style . left=img width exposeWidth *(I-1)' px '；
}
}
SetImgsPos()；
//计算每个门应该移动的距离
var translate=img width-expose width；
//为每个门绑定事件
for(var I=0；iimgs.lengthi ){
//使用立即调用的函数表达式，以获得不同的I值
(职能(一){
imgs[i]。onmouseover=function(){
SetImgsPos()；
//打开门
for(var j=1；j=I；j ){
imgs[j]. style . left=parse int(imgs[j]. style . left，10) -翻译' px '；
}
}
})(一)；
}
}
效果显示
按照上面的步骤，就可以实现简单的推拉门效果了。去试试吧！
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。