本文实例讲述了JS实现滑动门效果的方法。分享给大家供大家参考，具体如下：
描述：鼠标移动到一副图片上，会显示该副图片的全貌，而其他图片会显示概貌，效果图如下：
一、没有动画效果的运动
思路：
1.定好每张图片的初始位置（第一张完全显示，234只露出一部分） 2.计算每道门的移动距离（即未显露的部分） 3.绑定鼠标滑过事件
Box=document.getElementById("Box");
var img=Box.getElementsByTagName("img");
//单张图片宽度
var imgWidth=img[0].offsetWidth;
//露出的宽度
var exposeWidth=160;
//设置容器总宽度
var BoxWidth=imgWidth+exposeWidth*(img.length-1)
Box.style.width=BoxWidth+"px";
//设置图片初始位置
function setImgspos(){
for(var i=1,len=img.length;i性能高
img[i].style.left=imgWidth+exposeWidth*(i-1)+"px";
}
}
setImgspos();
//计算每道门打开时应移动的距离
var translate=imgWidth-exposeWidth;
for(var i=0,len=img.length;i函数？(简单来说是函数变量作用域的问题)img[i].onmouSEOver=function(){}这个函数内部使用了变量i，但是i没有定义，于是向外查找，找到for循环里定义的i，点击事件是for循环执行完毕后才开始执行的，即此时i=4，所以会报错img[i]没有定义，这里加一层匿名函数相当于闭包处理，i以形参的方式传递给内层函数
img[i].onmouSEOver=function(){
setImgspos(); //每次移上去先重置位置
for(var j=1;j<=i;j++){ //第二个循环体作用：可能会移多道门(比如放到第三道门上，二和三都要动，不是只动三，另外第一道门永远不动)
img[j].style.left=parseInt(img[j].style.left)-translate+"px";
}
};
})(i); //这个i是实参
}
};
二、展开加速、收拢减速的运动
注意：设置每道门初始位置时，不需要在写一个function了，因为要分别写打开和关闭动画，会造成一个卡顿，瞬间闪烁。
思路：
1.需要鼠标滑过这道门的初始位置 2.需要鼠标滑过这道门的结尾位置 3.需要一个速度和定时器来完成缓缓移动的过程
Box=document.getElementById("Box");
var img=Box.getElementsByTagName("img");
//单张图片宽度
var imgWidth=img[0].offsetWidth;
//露出的宽度
var exposeWidth=160;
//设置容器总宽度
var BoxWidth=imgWidth+exposeWidth*(img.length-1)
Box.style.width=BoxWidth+"px";
//设置图片初始位置
for(var i=1,len=img.length;i=end){
el.style.left=end+"px";
}else{
setTimeout(arguments.callee,25);
};
var translate=imgWidth-exposeWidth;
for(var i=0,len=img.length;iSEOver=function(){
//开门 自己和自己左边的全部循环到
for(var j=1;j<=i;j++){
openDoor(img[j],translate);
}
//关门 自己右边的全部循环到
for(var j=i+1;j
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家JavaScript程序设计有所帮助。
原文链接：https://www.f2er.com/js/43395.html