原理：滑动门，这里以图片进行实例，首先设定主盒子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. 廖雪峰Java1-4数组操作-1遍历数组

    1.遍历数组 for循环通过下标遍历数组 for each直接遍历数组所有元素 int[] ns1 = {1, 34, 9, 16, 25}; for(int i = 0;i<ns1.lengt ...

  2. tesseract-ocr4.0 安装部署及训练验证码识别

    1.  下载最新版本的leptonica,  leptonica-1.74.1.tar.gz   2. 编译安装 tar -zxvf leptonica-.tar.gz cd leptonica- . ...

  3. WireGuard协议介绍

    原文: https://www.jianshu.com/p/32c3e62c2711

  4. maven工程强制更新 ，下载源码操作

    看图,在window->preferences->maven , 勾选图中的选项就可以下载源码包了,

  5. unity3d动态创建一个文本

    2D文本需要Canvas和EventSystem,最好使用Editor来添加: 动态显示一个文本,采用3D Text的方式: GameObject text = new GameObject(); t ...

  6. Everything You Always Wanted to Know About SDRAM (Memory): But Were Afraid to Ask

    It’s coming up on a year since we published our last memory review; possibly the longest hiatus this ...

  7. fastclick.js解决移动端（ipad）点击事件反应慢问题

    参考http://blog.csdn.net/xjun0812/article/details/64919063 http://www.jianshu.com/p/16d3e4f9b2a9 问题的发现 ...

  8. day24类的继承

    类的继承1 什么是继承    继承一种新建类的方式,新建的类称之为子类/派生类,被继承的类称之为父类\基类\超类    python中继承的特点:        1. 子类可以遗传/重用父类的属性   ...

  9. websocket 群聊,单聊,加密,解密

    群聊 from flask import Flask, request, render_templatefrom geventwebsocket.handler import WebSocketHan ...

  10. 安全测试7_Web安全在线工具

    1.搜索引擎语法简单讲解:(实际上就是搜索引擎的高级搜索) 类似百度:可以看到下图我们是想在指定站点搜索包含login的页面,搜索语法为site:(testphp.vulnweb.com) " ...