原理：滑动门，这里以图片进行实例，首先设定主盒子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. 廖雪峰Java3异常处理-2断言和日志-2使用JDK Logging

    1.日志 为了取代System.out.println() 可以设置输出样式 可以设置输出级别,禁止某些级别输出 可以被重定向到文件 可以按包名控制日志级别 2.JDK内置Logging 在java. ...

  2. echo() print() printf() print_r() 的区别

    echo是一个语言结构而非函数,因此它无法被变量函数调用, print和print_r是函数,语句没有返回值,函数可以有返回值(即便没有用) print()    只能打印出简单类型变量的值(如int ...

  3. java之基本数据类型

    11,java里面有没有long double类型或者比double更精度的? =========== 11,java里面有没有long double类型或者比double更精度的? java的基本数 ...

  4. [UE4]控件模板参数

    创建的时候就会变成这样了.

  5. 优化：js 逻辑运算符优化

    运算符的代码优化,可以精简代码,提高代码可读性 下面主要讨论下逻辑运算符与 &&, 或||. 示例: 假设对成长速度显示规定如下: 成长速度为5显示1个箭头: 成长速度为10显示2个箭 ...

  6. MySQL架构之keepalived+haproxy+mysql 实现MHA中slave集群负载均衡的高可用（原创）

    MySQL的高可用方案一般有如下几种:keepalived+双主,MHA,PXC,MMM,Heartbeat+DRBD等,比较常用的是keepalived+双主,MHA和PXC. HAProxy是一款 ...

  7. 三种方式控制GPIO

    BBB为REV C,emmc4G版本,系统为Debian 7.9 wheezy (2015.11.12),内核为Linux 3.8.13.使用命令cat /etc/dogtag查看 查看系统信息的四种 ...

  8. ajax的跨域解决方案（java+ajax）

    简单的建立一个后台项目 新建servlet: 内容如下: package a; import java.io.IOException; import java.io.PrintWriter; impo ...

  9. linux chown命令解除文件夹的root权限限制

    sudo chown -R demouser file 这个命令可以解除linux文件的超级权限限制 摘录: chown将指定文件的拥有者改为指定的用户或组,用户可以是用户名或者用户ID:组可以是组名 ...

  10. Json1：使用gson解析、生成json

    Json解析: 1.json第三方解析包:json-lib.gson.jackson.fastjson等2.Google-gson只兼容jdk1.5版本以上:JSON-lib分别支持1.4和1.53. ...