JS实现滑动门效果的方法详解


Posted in Javascript onDecember 19, 2016

本文实例讲述了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<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<len;i++){
    (function(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.需要一个速度和定时器来完成缓缓移动的过程

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);
  };
  function closeDoor(el,translate){
    var begin=parseInt(el.pos)-translate; //关门默认情况是张开的
    var end=begin+translate; //这里可以直接写var end=parseInt(el.pos);
    var iSpeed=100;
    setTimeout(function(){
      el.style.left=parseInt(el.style.left)+iSpeed+"px"; //为什么不用begin?每次的初始位置会变
      iSpeed=Math.ceil(iSpeed*0.7); //没有这句话就是匀速运动
      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<img.length;j++){
          closeDoor(img[j],translate);
        }
      };
    })(i);
  }
};

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

Javascript 相关文章推荐
用 Javascript 验证表单(form)中的单选(radio)值
Sep 08 Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
Apr 09 Javascript
读jQuery之九 一些瑕疵说明
Jun 21 Javascript
javascript预加载图片、css、js的方法示例介绍
Oct 14 Javascript
JavaScript用Number方法实现string转int
May 13 Javascript
vue开发心得和技巧分享
Oct 27 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
Apr 11 Javascript
浅谈React组件之性能优化
Mar 02 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
详解基于mpvue的小程序markdown适配解决方案
May 08 Javascript
JS实现520 表白简单代码
May 21 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
Sep 29 Javascript
jQuery纵向导航菜单效果实现方法
Dec 19 #Javascript
简单理解js的冒泡排序
Dec 19 #Javascript
JS瀑布流实现方法实例分析
Dec 19 #Javascript
移动端日期插件Mobiscroll.js使用详解
Dec 19 #Javascript
JavaScript闭包和范围实例详解
Dec 19 #Javascript
JS前端笔试题分析
Dec 19 #Javascript
利用vue实现模态框组件
Dec 19 #Javascript
You might like
实用函数8
2007/11/08 PHP
ThinkPHP中I(),U(),$this-&gt;post()等函数用法
2014/11/22 PHP
ecshop实现smtp发送邮件
2015/02/03 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
Mootools 1.2教程 事件处理
2009/09/15 Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
jquery动态增加text元素以及删除文本内容实例代码
2013/07/01 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
JavaScript使用Replace进行字符串替换的方法
2015/04/14 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
2015/06/05 Javascript
纯js实现手风琴效果
2020/04/17 Javascript
jquery实现左右轮播切换效果
2018/01/01 jQuery
解决npm安装Electron缓慢网络超时导致失败的问题
2018/02/06 Javascript
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
python在Windows下安装setuptools(easy_install工具)步骤详解
2016/07/01 Python
Python 基础教程之包和类的用法
2017/02/23 Python
python实现音乐下载器
2018/04/15 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
python 缺失值处理的方法(Imputation)
2019/07/02 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
HTML最新标准HTML5总结(必看)
2016/06/13 HTML / CSS
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
如何利用cmp命令比较文件
2013/09/23 面试题
亮剑观后感500字
2015/06/05 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书
Python scrapy爬取起点中文网小说榜单
2021/06/13 Python
Redis入门教程详解
2021/08/30 Redis
MySQL中的隐藏列的具体查看
2021/09/04 MySQL