js实现滑动门效果的详细解决方案
本文介绍了用js实现滑动门效果的方法，供大家参考，如下：描述：鼠标移动到一对图片中，以显示图像的全貌，其他图片将显示一般图片。效果如下：
没有动画的乐章
思想:
1。设置每个图片的初始位置（第一个完整显示，234部分）
2。计算每一门移动的距离（即这部分）
三.将鼠标绑定到事件之上
窗口。指针函数（）{
VaR箱= document.getelementbyid（盒子）；
VaR img = box.getelementsbytagname（IMG）；
/单个图片宽度
无功imgwidth = img { 0 }。offsetwidth；
显示/宽度
无功exposewidth = 160；
容器/集合的总宽度
VaR的颜色= imgwidth + exposewidth *（IMG。length-1）
箱。风格。宽度=颜色+PX；
设置图片/初始位置
功能setimgspos（）{
对于（var i = 1，len = img.length；我< len；i++）{ / /长度是首先在初始化语句的循环定义，这样就不需要计算IMG每次的数量，这比（VaR，我+ +）。
img {我}。风格。左= imgwidth + exposewidth *（i-1）+PX；
}
}
SetImgspos（）；
计算应打开每扇门/移动距离。
翻译= imgwidth exposewidth VaR；
对于（var i = 0，len = img.length；我< len；i++）{
函数（i）{这里为什么是匿名函数（作为一个简单变量范围问题功能）img {我}。onmouseover =函数（）{ }这个函数使用一个可变的我，但我不确定，所以寻找，寻找在我的循环定义，单击事件是周期执行完成后开始执行，即我= 4，所以错误不在img {我}这里定义，添加一层匿名函数相当于关闭，我转移到内部功能参数
img {我}。onmouseover =函数（）{
（setimgspos / /）；每班到复位位置
对于（var j = 1；j = i；j +；+）；第二循环身体动作：可以移动更多的门（例如在第三个门上，两个和三个移动，不仅是三个，第一个门也不会移动）
img {，}。风格。左= parseInt（img {，}。风格。左）翻译+PX；
}
}；
}）（i）；这是参数i
}
}；
两。加速和关闭减速运动
注意：每个门设置初始位置，不需要写一个函数，因为我们写的是打开和关闭动画，创建卡尔顿，瞬时闪烁。
思想:
1。需要鼠标通过门的初始位置滑动。
2。你需要老鼠从门的末端溜走。
三.需要一个速度和定时器来完成缓慢的运动过程。
窗口。指针函数（）{
VaR箱= document.getelementbyid（盒子）；
VaR img = box.getelementsbytagname（IMG）；
/单个图片宽度
无功imgwidth = img { 0 }。offsetwidth；
显示/宽度
无功exposewidth = 160；
容器/集合的总宽度
VaR的颜色= imgwidth + exposewidth *（IMG。length-1）
箱。风格。宽度=颜色+PX；
设置图片/初始位置
对于（var i = 1，len = img.length；我< len；i++）{
img {我}，{我} POS = IMG。风格。左= imgwidth + exposewidth *（i-1）+PX；
}
功能开放（EL，翻译）{
VaR开始= parseInt（EL，POS）；
开始翻译；
VaR迈跃= 10；
setTimeout（）{（）函数（
埃尔。风格。左= parseInt（EL。风格。左）-迈跃+PX； / /为什么不开始呢每次变化的初始位置
迈跃* = 1.5； / /这句话是没有统一的运动
如果（parseInt（EL。风格。左）<=结束）{
样式。左=结束；
其他{ }
setTimeout（arguments.callee，25）； / /定时器的名字可以直接调用，没有名字，与原生js arguments.callee
}
}，25）；
}；
功能closedoor（EL，翻译）{
VaR开始= parseInt（EL，POS）-翻译；默认是打开/关闭
var =开始+翻译； / /在这里你可以直接到VAR = parseInt写（EL，POS）；
VaR迈跃= 100；
setTimeout（）{（）函数（
埃尔。风格。左= parseInt（EL。风格。左）+迈跃+PX； / /为什么不开始呢每次变化的初始位置
迈跃= math.ceil（迈跃×0.7）； / /这句话是没有统一的运动
如果（parseInt（EL。风格。左）> =结束）{
样式。左=结束；
其他{ }
setTimeout（arguments.callee，25）； / /定时器的名字可以直接调用，没有名字，与原生js arguments.callee
}
}，25）；
}；
翻译= imgwidth exposewidth VaR；
对于（var i = 0，len = img.length；我< len；i++）{
（函数（i）{）
img {我}。onmouseover =函数（）{
全部循环，他自己和他的左边打开门。
对于（var j＝1；j＝i；j + +）{
门户开放（img { J }，翻译）；
}
完全关闭他的权利
对于（var j = i + 1；J < img.length；j++）{
closedoor（img {，}，翻译）；
}
}；
}）（一）；
}
}；
更多有关Javaｓｃｒｉｐｔ相关内容的读者可以看到特别站：Javaｓｃｒｉｐｔ切换效果和技巧摘要
希望本文能对javaｓｃｒｉｐｔ程序设计有所帮助。