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二、展开加速、收拢减速的运动

注意：设置每道门初始位置时，不需要在写一个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=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更多关于Javascript相关内容感兴趣的读者可查看本站专题：《Javascript切换特效与技巧总结》、《Javascript图形绘制技巧总结》、《Javascript查找算法技巧总结》、《Javascript动画特效与技巧汇总》、《Javascript错误与调试技巧总结》、《Javascript数据结构与算法技巧总结》、《Javascript遍历算法与技巧总结》及《Javascript数学运算用法总结》

希望本文所述对大家Javascript程序设计有所帮助。