原理：滑动门，这里以图片进行实例，首先设定主盒子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. DNS解析分析

    一.基本概念 域名系统: 域名系统(英文:Domain Name System,缩写:DNS)是因特网的一项服务.它作为将域名和IP地址相互映射的一个分布式数据库,能够使人更方便地访问互联网.DNS使 ...

  2. 00014 - linux中用top、ps命令查看进程中的线程

    在Linux上显示某个进程的线程的几种方式. 方法一:PS 在ps命令中,“-T”选项可以开启线程查看.下面的命令列出了由进程号为<pid>的进程创建的所有线程. 1.$ ps -T -p ...

  3. h5标签兼容

    <!--[if lt IE 9]> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"> ...

  4. 3-自己动手写HashMap 增加哈希算法

    public class HashMap { //存储元素数组 private Entry[] entry = null; //记录map个数 private int size; //构造器 publ ...

  5. 【LeetCode】2. Add Two Numbers 两数相加

    给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来表示它们的和 ...

  6. lufen登录注册

    创建精写报错信息表用于记录错误信息(新的文件夹,创建新的py) #静写报错信息class BaseResponse(object): def __init__(self): self.code=100 ...

  7. com.alibaba.dubbo.rpc.RpcException: Fail to start server(url: dubbo://192.16。。

    开启了linux的zookeeper服务,启动e3-manager时发现出现com.alibaba.dubbo.rpc.RpcException: Fail to start server(url: ...

  8. python - requests中添加配置文件

        HttpRequests.py #-*- coding:utf-8 -*- import requests class HttpRequests(): def http_requests(se ...

  9. 微信小程序笔记<二>认识app.json

    *.json文件在小程序开发中必不可少,从 app.json 开始认识小程序中的配置文件*.json: app.json 为小程序必须文件,它不仅作为配置文件管理着小程序的UI还充当着路由器的功能: ...

  10. suricata 关键字补充说明

    基本关键字 1.msg(对匹配到的规则的说明,第一部分约定用大写字母表示,msg始终是签名的第一个关键字) 注意:msg中必须转义以下字符: ; \ " msg :“ATTACK-RESPO ...