原理：滑动门，这里以图片进行实例，首先设定主盒子div的宽度和高度设定，并进行图片初始化位置的设定，然后将图片绑定事件，并设定要达到的效果

html代码：

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <link rel="stylesheet" href="./css/huadong.css">
  7.      <script src="./js/huadong.js"></script>
  8.  
  9.  </head>
  10.  <body>
  11.      <div class="container"  Id="container" >
  12.          <img src="./img/1.jpg" alt="">
  13.          <img src="./img/2.jpg" alt="">
  14.          <img src="./img/3.jpg" alt="">
  15.          <img src="./img/4.jpg" alt="">
  16.      </div>
  17.  </body>
  18.  </html>

css代码：

  1.  *{
  2.      margin:;
  3.      padding:;
  4.  }
  5.  div{
  6.      position:relative;
  7.      border:1px solid #ccc;
  8.      margin:100px auto;
  9.      overflow: hidden;
  10.      width:600px;
  11.      height:300px;
  12.  }
  13.  img{
  14.      position:absolute;
  15.      left:;
  16.      border-left: 1px solid #CCC;
  17.  }

js代码（两种）：

1. 过程式实现方式：

  1.  window.onload = function(){
  2.      var obox = document.querySelector('div.container');
  3.      var aImgs = document.querySelectorAll('img');
  4.      var imgWidth = aImgs[0].offsetWidth;
  5.      var exposeWidth = 100;
  6.      var oboxWidth = imgWidth +  exposeWidth*(aImgs.length-1);
  7.      var oboxHeight = aImgs[0].offsetHeight;
  8.      obox.style.width =  oboxWidth  + 'px';
  9.      obox.style.height = oboxHeight + 'px';
  10.      function set_position(){
  11.          for(var i=1;i<aImgs.length;i++){
  12.              aImgs[i].style.left = imgWidth + exposeWidth*(i-1) + 'px';
  13.          }
  14.      };
  15.      set_position();
  16.      var translate = imgWidth - exposeWidth;
  17.    // 添加自定义索引进行传递当前img 的索引
  18.      for(var  i=0;i<aImgs.length;i++){
  19.           aImgs[i].index = i;
  20.           aImgs[i].onmouseover = function(){
  21.               set_position();
  22.               for(var j = 1;j<=this.index;j++){
  23.                  aImgs[j].style.left = parseInt( aImgs[j].style.left,10) - translate + 'px';
  24.               }
  25.           }
  26.      }
  27.  
  28.      //    // 采用立即表达式的方式传递img的索引
  29.      // for(var i=0;i<aImgs.length;i++){
  30.      //     (function(i){
  31.      //         aImgs[i].onmouseover = function(){
  32.      //             set_position();
  33.      //             for(var j = 1;j<=i;j++){
  34.      //                 aImgs[j].style.left = parseInt( aImgs[j].style.left,10) - translate + 'px';
  35.      //             }
  36.      //         }
  37.      //     }(i));
  38.      // }
  39.  
  40.      //   // 采用ES6 let 定义变量的方式传递当前索引
  41.      // for(let i=0;i<aImgs.length;i++){
  42.      //      aImgs[i].onmouseover = function(){
  43.      //          set_position();
  44.      //          for(var j = 1;j<=i;j++){
  45.      //             aImgs[j].style.left = parseInt( aImgs[j].style.left,10) - translate + 'px';
  46.      //          }
  47.      //      }
  48.      // }
  49.  
  50.  }

2. 采用构造函数式实现方式：

  1.  window.onload = function(){
  2.      // 创建构造函数
  3.      function huadong(){
  4.          this.odiv = document.querySelector('div.container');
  5.          this.aImgs = document.querySelectorAll('img');
  6.          this.imgWidth = this.aImgs[0].offsetWidth;
  7.          this.exposeWidth = 100 ;
  8.      };
  9.      // 设置图片的 left值
  10.      huadong.prototype.set_position = function(){
  11.          for(var i = 1;i<this.aImgs.length;i++){
  12.              this.aImgs[i].style.left = this.imgWidth + this.exposeWidth*(i-1) + 'px';
  13.          }
  14.      };
  15.      // 初始化，即设定div的宽度，并调用函数设定图片的left
  16.      huadong.prototype.init = function(){
  17.          var DivWidth = this.imgWidth  + this.exposeWidth*(this.aImgs.length-1);
  18.          var DivHeight = this.aImgs[0].offsetHeight;
  19.          this.odiv.style.width = DivWidth + 'px';
  20.          this.odiv.style.height = DivHeight  + 'px';
  21.          this.set_position();
  22.      };
  23.      // 鼠标在图片上时的效果
  24.      huadong.prototype.xiaoguo = function(btn){
  25.          var translate = this.imgWidth - this.exposeWidth;
  26.          this.set_position();
  27.          for(var j = 1;j<=btn.index;j++){
  28.              this.aImgs[j].style.left = parseInt( this.aImgs[j].style.left,10) - translate + 'px';
  29.          }
  30.      };
  31.      // 绑定鼠标事件
  32.      huadong.prototype.bind = function(){
  33.          this.init();
  34.          var that = this;
  35.          for(var i=0;i<this.aImgs.length;i++){
  36.              this.aImgs[i].index = i;
  37.              this.aImgs[i].onmouseover = function(){
  38.                  that.xiaoguo(this);
  39.              }
  40.          }
  41.      };
  42.      var Newdonghua = new huadong();
  43.      Newdonghua.bind();
  44.  }

运行结果，两种方法都有效，结果一样：

js 滑动门的实现的更多相关文章

  1. JS滑动门,JQuery滑动门

    <a href="#" id="one1" onmouseover="setTab('one',1,2)" class="h ...

  2. [Js]滑动门效果

    描述:鼠标移动到一副图片上,会显示该副图片的全貌,而其他图片会显示概貌 一.没有动画效果的运动 思路: 1.定好每张图片的初始位置(第一张完全显示,234只露出一部分) 2.计算每道门的移动距离(即未 ...

  3. js滑动门及对像的使用

    function scrollDoor() { } scrollDoor.prototype = { sd: function (menus, divs, openClass, closeClass) ...

  4. JS切割图片-滑动门效果

    转载请注明来源:https://www.cnblogs.com/hookjc/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  5. Javascript学习笔记2.2 Javascript与DOM选项卡（滑动门）案例详解

    学习了DOM的知识,今天开始做些练习,想到了一个网页滑动门的特效,见下图: 1.通过建立索引实现 <!doctype html> <html> <head> < ...

  6. jquery插件之tab标签页或滑动门

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...

  7. 代码简洁的滑动门（tab）jquery插件

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...

  8. 从零开始学 Web 之 CSS（五）可见性、内容移除、精灵图、属性选择器、滑动门

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  9. 李洪强和你一起学习前端之(7)定位盒子 css可见性 滑动门案例

    今天是2017年3月23日 1 复习昨天知识 1.1浮动 Float:left | right 特点: ->浮动的元素不占位置(脱标) ->可以将行内元素转化为行内块元素 ->块级元 ...

随机推荐

  1. opencv mser算法框出图片文字区域

    MSER(Maximally Stable Extrernal Regions)是区域检测中影响最大的算法 1. 原理 MSER基于分水岭的概念:对图像进行二值化,二值化阈值取[0, 255],这样二 ...

  2. [UE4]让机器人开枪射击

  3. [UE4]扔枪后捡枪：Get Overlapping Actors

    一.搜索碰撞体是否碰撞到枪,使用Get Overlapping Actors,只搜索Class Filter设置的对象类型.Get Overlapping Actors没有Class Filter参数 ...

  4. 数据分箱：等频分箱，等距分箱，卡方分箱，计算WOE、IV

    转载:https://zhuanlan.zhihu.com/p/38440477 转载:https://blog.csdn.net/starzhou/article/details/78930490 ...

  5. 轻型DNS服务器dnsmasq

    源码安装 源码下载地址 apt 安装 apt install dnsmasq 编辑配置 vim /etc/dnsmasq.conf resolv-file=/etc/resolv.dnsmasq.co ...

  6. Hbase 分布式环境安装部署

    Hbase分布式集群搭建--安装步骤 这一步如果没有deploy.sh脚本的可以使用scp命令分别分发到其他节点去 到集群里看看安装好的hbase 使用脚本启动所有节点的zookeeper 启动HDF ...

  7. 用T-SQL命令附加数据库时，出现如下异常信息

    用T-SQL命令附加数据库时,出现如下异常信息: 无法打开物理文件 XXX.mdf".操作系统错误 5:"5(拒绝访问.)". (Microsoft SQL Server ...

  8. angularjs路由传递参数

    ui-sref.$state.go 的区别 ui-sref 一般使用在 <a>...</a>: $state.go('someState')一般使用在 controller里面 ...

  9. flask session,蓝图,装饰器,路由和对象配置

    1.Flask 中的路由   *endpoint - url_for 反向地址  *endpoint 默认是视图函数名  *methods 指定视图函数的请求方式,默认GET  defaults={& ...

  10. WPF圆角按钮与触发颜色变化

    <Button x:Name="button1" Content="按钮1" Margin="10,10,0,0" Cursor=&q ...