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

html代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <link rel="stylesheet" href="./css/huadong.css">

     <script src="./js/huadong.js"></script>

 </head>

 <body>

     <div class="container"  Id="container" >

         <img src="./img/1.jpg" alt="">

         <img src="./img/2.jpg" alt="">

         <img src="./img/3.jpg" alt="">

         <img src="./img/4.jpg" alt="">

     </div>

 </body>

 </html>

css代码：

 *{

     margin:;

     padding:;

 }

 div{

     position:relative;

     border:1px solid #ccc;

     margin:100px auto;

     overflow: hidden;

     width:600px;

     height:300px;

 }

 img{

     position:absolute;

     left:;

     border-left: 1px solid #CCC;

 }

js代码（两种）：

1. 过程式实现方式：

 window.onload = function(){

     var obox = document.querySelector('div.container');

     var aImgs = document.querySelectorAll('img');

     var imgWidth = aImgs[0].offsetWidth;

     var exposeWidth = 100;

     var oboxWidth = imgWidth +  exposeWidth*(aImgs.length-1);

     var oboxHeight = aImgs[0].offsetHeight;

     obox.style.width =  oboxWidth  + 'px';

     obox.style.height = oboxHeight + 'px';

     function set_position(){

         for(var i=1;i<aImgs.length;i++){

             aImgs[i].style.left = imgWidth + exposeWidth*(i-1) + 'px';

         }

     };

     set_position();

     var translate = imgWidth - exposeWidth;

   // 添加自定义索引进行传递当前img 的索引

     for(var  i=0;i<aImgs.length;i++){

          aImgs[i].index = i;

          aImgs[i].onmouseover = function(){

              set_position();

              for(var j = 1;j<=this.index;j++){

                 aImgs[j].style.left = parseInt( aImgs[j].style.left,10) - translate + 'px';

              }

          }

     }

     //    // 采用立即表达式的方式传递img的索引

     // for(var i=0;i<aImgs.length;i++){

     //     (function(i){

     //         aImgs[i].onmouseover = function(){

     //             set_position();

     //             for(var j = 1;j<=i;j++){

     //                 aImgs[j].style.left = parseInt( aImgs[j].style.left,10) - translate + 'px';

     //             }

     //         }

     //     }(i));

     // }

     //   // 采用ES6 let 定义变量的方式传递当前索引

     // for(let i=0;i<aImgs.length;i++){

     //      aImgs[i].onmouseover = function(){

     //          set_position();

     //          for(var j = 1;j<=i;j++){

     //             aImgs[j].style.left = parseInt( aImgs[j].style.left,10) - translate + 'px';

     //          }

     //      }

     // }

 }

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

 window.onload = function(){

     // 创建构造函数

     function huadong(){

         this.odiv = document.querySelector('div.container');

         this.aImgs = document.querySelectorAll('img');

         this.imgWidth = this.aImgs[0].offsetWidth;

         this.exposeWidth = 100 ;

     };

     // 设置图片的 left值

     huadong.prototype.set_position = function(){

         for(var i = 1;i<this.aImgs.length;i++){

             this.aImgs[i].style.left = this.imgWidth + this.exposeWidth*(i-1) + 'px';

         }

     };

     // 初始化，即设定div的宽度，并调用函数设定图片的left

     huadong.prototype.init = function(){

         var DivWidth = this.imgWidth  + this.exposeWidth*(this.aImgs.length-1);

         var DivHeight = this.aImgs[0].offsetHeight;

         this.odiv.style.width = DivWidth + 'px';

         this.odiv.style.height = DivHeight  + 'px';

         this.set_position();

     };

     // 鼠标在图片上时的效果

     huadong.prototype.xiaoguo = function(btn){

         var translate = this.imgWidth - this.exposeWidth;

         this.set_position();

         for(var j = 1;j<=btn.index;j++){

             this.aImgs[j].style.left = parseInt( this.aImgs[j].style.left,10) - translate + 'px';

         }

     };

     // 绑定鼠标事件

     huadong.prototype.bind = function(){

         this.init();

         var that = this;

         for(var i=0;i<this.aImgs.length;i++){

             this.aImgs[i].index = i;

             this.aImgs[i].onmouseover = function(){

                 that.xiaoguo(this);

             }

         }

     };

     var Newdonghua = new huadong();

     Newdonghua.bind();

 }

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

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. 廖雪峰Java2面向对象编程-5包和classpath-1静态字段和方法

    1.静态字段 1.1定义:用static修饰的字段称为静态字段 普通字段在每个实例中都有自己的一个独立的空间 静态字段只有1个共享空间,所有实例都共享该字段. public class Person{ ...

  2. mongodb json序列化时间格式

    利用bson解决 type error 报错问题. # 序列化 from bson import json_util import json aa = json.dumps(anObject, def ...

  3. DockerFile服务

    Dockerfile分为四部分:基础镜像信息.镜像创建者信息.镜像操作指令.容器启动执行指令. 一.Dockerfile的书写规则及指令使用方法 Dockerfile的指令是忽略大小写的,建议使用大写 ...

  4. android设置系统横屏方案

    效果如下: 实现方案: 1.ChangeOrientationService.java /** * @描述 强制旋转屏幕服务 * @作者 tll * @时间 2018/1/5 */ public cl ...

  5. Mysql 之闪回技术 binlog2sql

    1.下载 https://github.com/danfengcao/binlog2sql http://rpmfind.net Search: python-pip pip 是一个Python包管理 ...

  6. mdm9607 gpio12~17改成普通gpio的方法

    qualcomm mdm9607的gpio12~gpio17定义如下: 现在如果想要设置GPIO_12~GPIO_17为普通GPIO口. 需要修改如下: 顺便附上qualcomm的说明: Remove ...

  7. 使用LVS实现负载均衡原理及安装配置详解（转）

    负载均衡集群是 load balance 集群的简写,翻译成中文就是负载均衡集群.常用的负载均衡开源软件有nginx.lvs.haproxy,商业的硬件负载均衡设备F5.Netscale.这里主要是学 ...

  8. react 数据管理之state思想指南

    react的数据管理库有不少,最常听到的可能是mobx redux altjs之类的,当然还有很多其他,可以自己搜索. 为什么需要数据管理库呢,因为react本身只是为了实现view的表现,而不是数据 ...

  9. webpack实现scss编译配置

    1.webpack.start.js: var webpack = require('webpack'); var SpritesmithPlugin = require('webpack-sprit ...

  10. SDOI2018物理实验

    /* 向量运算不会呐 抄了一个长度几百行的模板 一直过不了编译 醉了 还是抄了大佬的代码 首先把所有的线段投影到 导轨上 然后用set 分上和下分别维护一下 距离导轨最近的线段 是能够照射到的 可以证 ...