原理：滑动门，这里以图片进行实例，首先设定主盒子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. jquery插件：textarea的字数提示、textBox的文字提示

    引用文件:    <script src=”/TextTip/TextTip.js” type=”text/javascript”></script> 一.textarea的字 ...

  2. 项目中自己一直用到的baseAdapter的类

    import java.util.LinkedList; import java.util.List; import android.content.Context; import android.v ...

  3. IP段，ASN与BGP之间的关系

    概览 IP段就是类似于1.0.2.0-1.0.2.255或者1.0.2.0/24的形式 ASN(Autonomous system number)自治系统编号 BGP(Border Gateway P ...

  4. git遇到的问题之“Please make sure you have the correct access rights and the repository exists.”

    对于git的提交一直很小心翼翼,感觉一不小心就会踩到莫名的坑. 这不, 某天commit 就遇到了On branch master nothing to commit (working directo ...

  5. 第三章： web界面操作

    3.1 zabbix的web安装 3.1.1 使用浏览器访问 http://10.0.0.61/zabbix/setup.php 在检测信息时,可查看具体的报错信息进行不同的解决 选择mysql数据库 ...

  6. Linux CentOS7.5上二进制安装MySQL5.7.23

    1.下载二进制文件 cd /usr/local/src/ wget https://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5.7.23-linux-glib ...

  7. Java基础知识_毕向东_Java基础视频教程笔记(5-10 面向对象)

    06天-05-面向对象(帮助文档的制作javadoc):java文档生成命令:javadoc -d filepatn demo.java   -author -version(可选)一个类中默认会有一 ...

  8. CRM4.0 上传附件大小限制

    问题背景: 上传附件大小默认为 5M 可以通过以下设置修改其大小 : "设置"--〉“管理”--〉“系统设置”--〉“电子邮件”--〉“设置附件文件的大小限制”

  9. spark streaming插入hbase

    import java.sql.{DriverManager, ResultSet} import org.apache.spark._ import org.apache.spark.streami ...

  10. css初探

    CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector {                   property: value;                 ...