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 相关文章推荐
修改好的jquery滚动字幕效果实现代码
Jun 22 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
Jun 21 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
Mar 02 Javascript
Jquery-data的三种用法
Apr 18 jQuery
JavaScript面向对象精要(下部)
Sep 12 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
在Create React App中启用Sass和Less的方法示例
Jan 16 Javascript
JS数组方法join()用法实例分析
Jan 18 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
开启CURL扩展,让服务器支持PHP curl函数(远程采集)
2011/03/19 PHP
PHP实现把MySQL数据库导出为.sql文件实例(仿PHPMyadmin导出功能)
2014/05/10 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
js传值 判断
2006/10/26 Javascript
通过判断JavaScript的版本实现执行不同的代码
2010/05/11 Javascript
jQuery 中使用JSON的实现代码
2011/12/01 Javascript
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
AngularJS仿苹果滑屏删除控件
2016/01/18 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
[46:59]完美世界DOTA2联赛PWL S2 GXR vs Ink 第二场 11.19
2020/11/20 DOTA
Django admin美化插件suit使用示例
2017/12/12 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
python用match()函数爬数据方法详解
2019/07/23 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
TripAdvisor印尼站:全球领先的旅游网站
2018/03/15 全球购物
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
软件工程师面试题
2012/06/25 面试题
八年级历史教学反思
2014/01/10 职场文书
大学校运会广播稿
2014/02/03 职场文书
法制宣传标语集锦
2014/06/25 职场文书
会计工作总结范文2014
2014/12/23 职场文书
社区公民道德宣传日活动总结
2015/03/23 职场文书
企业党建工作总结2015
2015/05/26 职场文书
王亚平太空授课观后感
2015/06/12 职场文书
2015年幼儿教育工作总结
2015/07/24 职场文书
公司保洁员管理制度
2015/08/04 职场文书
python开发实时可视化仪表盘的示例
2021/05/07 Python
MySQL库表名大小写的选择
2021/06/05 MySQL
springboot如何初始化执行sql语句
2021/06/22 Java/Android