本文介绍了JS实现推拉门效果的方法。分享给大家参考，如下：

描述：在图片上移动鼠标将显示整个图片，而其他图片将显示大致的图片。效果图如下：

首先，没有动画运动

思考：

1.设置每张图片的初始位置(第一张完全显示，234只部分曝光)。2.计算每个门(即未曝光部分)的移动距离。3.绑定鼠标在事件上滑动

window . onload=function(){ var box=document . getelementbyid(' box ')；var img=box . getelementsbytagname(' img ')；//单个图片的宽度var imgWidth=img[0]。offsetWidth//曝光宽度var exposeWidth=160//设置容器总宽度var box width=imgwidthexpose width *(img . length-1)box . style . width=box width ' px '；//设置图片函数setimgpos () {for (var I=1，len=img.length伊琳；I ){ //len首先在for循环的初始化语句中定义，这样就不用每次都计算img的个数，比for(var I=1；长度；I)高性能img [I]。风格。left=imgwidthexpose width *(I-1)' px '；} } setImgspos()；//计算每扇门打开时应该移动的距离。VAR Translate=imgwidth-曝光宽度；for(var i=0，len=img.length伊琳；I ){(函数(i){ //为什么这里需要匿名函数？(简单来说就是函数变量范围的问题)img[i]。onmouseover=function () {}这个函数在内部使用变量I，但是I没有定义，所以它会查找并找到在for循环中定义的I。click事件在for循环执行后开始，也就是说，此时i=4，所以它会报告一个没有定义img [I]的错误。这里增加一层匿名函数相当于闭包处理，I传递给内层函数img [I]。onmouseover=function(){ setimgpos()；//每次移动时重置(var j=1)的位置；j=I；J ){ //第二圈体的功能：可以移动多个门(比如放在第三个门上，第二个和第三个门都会移动，不只是第三个门，第一个门永远不会移动)img [j]。风格。left=Parsent(img[j])。风格。左)-翻译“px”；} };})(I)；//这个I是一个实际参数} }；第二，扩大加速度，收缩减速运动

注意：设置每个门的初始位置时，不需要写函数，因为单独写开合动画会造成堵塞，瞬间眨眼。

思考：

1.需要鼠标滑过门2的初始位置。需要鼠标滑过门3的末端位置。需要速度和计时器来完成缓慢的移动过程

窗户。onload=function(){ var box=document。getelementbyid(' box ')；var img=box。getelementsbytagname(' img ')；//单张图片宽度var imgWidth=img[0].offset with//露出的宽度var exposeWidth=160//设置容器总宽度var box width=IMgwidth exposeWidth *(IMG)。长度-1)框。风格。width=BoxWidth ' px//设置图片初始位置for(var i=1，len=img.length伊琳；i ){ img[i].pos=img[I]。风格。left=IMgwidth exposeWidth *(I-1)“px”；}函数openDoor(el，translate){ var begin=ParSeint(El。pos)；var end=start-translate；var iSpeed=10setTimeout(function(){ El。风格。left=ParSeint(El。风格。左)-isPeed ' px '；//为什么不用开始吗？每次的初始位置会变iSpeed *=1.5//没有这句话就是匀速运动if(ParSeint(El。风格。左)=端){ El。风格。left=end ' px} else { setTimeout(参数。calleeper，25岁)；//定时器有名字可以直接调用，没名字，就用原生射流研究…方法arguments.callee } }，25)；};函数closeDoor(el，translate){ var begin=parsent(El。pos)-翻译；//关门默认情况是张开的var end=开始翻译；//这里可以直接写var end=ParSeint(El。pos)；var iSpeed=100 settimeout(function(){ El。风格。left=ParSeint(El。风格。左)是feed“px”；//为什么不用开始吗？每次的初始位置会变iSpeed=数学。天花板(ISPEED * 0.7)；//没有这句话就是匀速运动if(ParSeint(El。风格。左)=端){ El。风格。left=end ' px} else { setTimeout(参数。calleeper，25岁)；//定时器有名字可以直接调用，没名字，就用原生射流研究…方法arguments.callee } }，25)；};var translate=IMgwidth-曝光宽度；for(var i=0，len=img.length伊琳；我){(函数i){ img[i].onmouseover=function(){ //开门自己和自己左边的全部循环到for(var j=1；j=I；j ){ openDoor(img[j]，翻译);} //关门自己右边的全部循环到对于(var j=I ^ 1；长度；j ){闭门造车，翻译);} };})(一)；}};更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript切换特效与技巧总结》 、 《JavaScript图形绘制技巧总结》 、 《JavaScript查找算法技巧总结》 、 《JavaScript动画特效与技巧汇总》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。