这篇文章主要介绍了JS实现滑动门效果的方法,结合实例形式分析了滑动门效果的实现原理、步骤与相关注意事项,需要的朋友可以参考下
本文实例讲述了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 boxWidth=imgWidth+exposeWidth*(img.length-1) box.style.width=boxWidth+"px"; //设置图片初始位置 function setImgspos(){ for(var i=1,len=img.length;i<len;i++){ //len在for循环的初始化语句里先定义好，这样就不需要每次都计算img的个数了，比for(var i=1;i
二、展开加速、收拢减速的运动
注意：设置每道门初始位置时，不需要在写一个function了，因为要分别写打开和关闭动画，会造成一个卡顿，瞬间闪烁。
思路：
1.需要鼠标滑过这道门的初始位置
2.需要鼠标滑过这道门的结尾位置
3.需要一个速度和定时器来完成缓缓移动的过程
window.onload=function(){ var 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<len;i++){ img[i].pos=img[i].style.left=imgWidth+exposeWidth*(i-1)+"px"; } function openDoor(el,translate){ var begin=parseInt(el.pos); var end=begin-translate; var iSpeed=10; setTimeout(function(){ el.style.left=parseInt(el.style.left)-iSpeed+"px"; //为什么不用begin？每次的初始位置会变 iSpeed*=1.5; //没有这句话就是匀速运动 if(parseInt(el.style.left)=end){ el.style.left=end+"px"; }else{ setTimeout(arguments.callee,25); //定时器有名字可以直接调用，没名字，就用原生js方法arguments.callee } },25); }; var translate=imgWidth-exposeWidth; for(var i=0,len=img.length;i<len;i++){ (function(i){ img[i].onmouseover=function(){ //开门 自己和自己左边的全部循环到 for(var j=1;j<=i;j++){ openDoor(img[j],translate); } //关门 自己右边的全部循环到 for(var j=i+1;j
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript图形绘制技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
以上就是JS实现滑动门效果的方法详解的详细内容，更多请关注本站其它相关文章！
