先上图

鼠标滑过那张图，显示完整的哪张图，移除则复位：

简单的CSS加JS操作DOM实现：

<!doctype html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>sliding doors</title>

        <link rel="stylesheet" href="styles/reset.css" />

        <link rel="stylesheet" href="styles/slidingdoors.css" />

        <script src="scripts/slidingdoors.js"></script>

    </head>

    <body>

        <div id='container'>

            <img src="data:images/door1.png" alt="1080P神器" title="1080P神器" />

            <img src="data:images/door2.png" alt="5.5寸四核" title="5.5寸四核" />

            <img src="data:images/door3.png" alt="四核5寸" title="四核5寸" />

            <img src="data:images/door4.png" alt="5.7寸机皇" title="5.7寸机皇" />

        </div>

    </body>

</html>

css:

#container {

    height: 477px;

    margin: 0 auto;

    border-right: 1px solid #ccc;

    border-bottom: 1px solid #ccc;

    overflow: hidden;

    position: relative;

}

#container img {

    position: absolute;

    display: block;

    left: 0;

    border-left: 1px solid #ccc;

}

js操作：

window.onload = function() {

    //容器对象

    var box = document.getElementById('container');

    //获得图片NodeList对象集合

    var imgs = box.getElementsByTagName('img');

    //单张图片的宽度

    var imgWidth = imgs[0].offsetWidth;

    //设置掩藏门体露出的宽度

    var exposeWidth = 180;

    //设置容器总宽度

    var boxWidth = imgWidth + (imgs.length - 1) * exposeWidth;

    box.style.width = boxWidth + 'px';

    //设置每道门的初始位置

    function setImgsPos() {

        for (var i = 1, len = imgs.length; i < len; i++) {

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

        }

    }

    setImgsPos();

    //计算每道门打开时应移动的距离

    var translate = imgWidth - exposeWidth;

    //为每道门绑定事件

    for (var i = 0, len = imgs.length; i < len; i++) {

        //使用立即调用的函数表答式，为了获得不同的i值

        (function(i) {

            imgs[i].onmouseover = function() {

                //先将每道门复位

                setImgsPos();

                //打开门

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

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

                    //imgs[j].style.left = j*exposeWidth +"px";

                }

            };

            imgs[i].onmouseout = function(){

                setImgPos();

            };

        })(i);

    }

};

版权声明：本文为小平果原创文章，转载请注明：http://blog.csdn.net/i10630226

超实用的JavaScript代码段 Item5 --图片滑动效果实现的更多相关文章

  1. 超实用的JavaScript代码段 Item3 --图片轮播效果

    图片轮播效果 图片尺寸 统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒 ...

  2. 前端福利！10个短小却超实用的JavaScript 代码段

    JavaScript正变得越来越流行,它已经成为前端开发的第一选择,并且利用基于JavaScript语言的NodeJS,我们也可以开发出高 性能的后端服务,甚至我还看到在硬件编程领域也出现了JavaS ...

  3. 推荐10 个短小却超实用的 JavaScript 代码段

    1. 判断日期是否有效 JavaScript中自带的日期函数还是太过简单,很难满足真实项目中对不同日期格式进行解析和判断的需要.jQuery也有一些第三方库来使日期相关的处理变得简单,但有时你可能只需 ...

  4. 《超实用的JavaScript代码段》—— 读后总结

    这本书全是代码,从头到尾跟着坐下来确实收获很多.比那些古板的教科书式的理解更多,不过书中并不是每个例子都做了,有的作者封装的太多,觉得看了收获不多,就没细看——比如模块渐变.有空好好学学这段的代码. ...

  5. 超实用的JavaScript代码段

    1. 判断日期是否有效 JavaScript中自带的日期函数还是太过简单,很难满足真实项目中对不同日期格式进行解析和判断的需要.JQuery也有一些第三方库来使日期相关的处理变得简单,但有时你可能只需 ...

  6. 超实用的JavaScript代码段 --倒计时效果

    现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...

  7. 超实用的JavaScript代码段 Item4 --发送短信验证码

    发送短信验证码 实现点击“发送验证码”按钮后,按钮依次显示为“59秒后重试”.“58秒后重试”…直至倒计时至0秒时再恢复显示为“发送验证码”.在倒计时期间按钮为禁用状态 . 第一步.获取按钮.绑定事件 ...

  8. 超实用的JavaScript代码段 Item8 -- js对象的(深)拷贝

    js 对象 浅拷贝 和 深拷贝 1.浅拷贝 拷贝就是把父对像的属性,全部拷贝给子对象. 下面这个函数,就是在做拷贝: var Chinese = { nation:'中国' } var Doctor ...

  9. 超实用的JavaScript代码段 Item2 --伸缩菜单栏

    伸缩菜单栏 点击标题时判断该标题下的菜单是否显示,如果是显示的则将其隐藏,如果是隐藏的则将其显示出来. <!doctype html> <html lang="en&quo ...

随机推荐

  1. Android studio导入工程很卡及下载网络jar很慢问题总结

    AndroidStudio导入项目一直卡在Building gradle project info,实际上是因为你导入的这个项目使用的gradle与你已经拥有的gradle版本不一致,导致需要下载该项 ...

  2. 介绍一种很棒的wince 如何替换系统声音的方法

    Topic:介绍一种很棒的wince 如何替换系统声音的方法(作者:Baiduluckyboy) //------------------------------------------------- ...

  3. How to configure ODBC DSN to access local DB2 for Windows

    How to configure ODBC DSN to access local DB2 for Windows MA Genfeng (GuangdongUnitoll Services inco ...

  4. 使用bootstrap table 插件固定表头时 表头与表格内容无法对齐

    在使用bootstrap table开发后台管理系统,表格利用bootstrap-table插件来实现,使用bootstrap-table过程中,会出现表头错位的情况 表头对不齐效果: 解决的方法: ...

  5. 80端口被NT kernel & System 占用

    新年后正常上班的第一天,客户报告,虚拟机上的网站起不来了. 登录虚拟机的远程桌面,闪几下连接信息,后面就没了,不显示远程桌面.联系虚拟机管理,重启,远程桌面是连上了,网站还是起不来. 查看window ...

  6. Spring ioc 详解

    引述:IoC(控制反转:Inverse of Control)是Spring容器的内核,AOP.声明式事务等功能在此基础上开花结果.但是IoC这个重要的概念却比较晦涩隐讳,不容易让人望文生义,这不能不 ...

  7. 春天aopframework实现

    Java的代码   包 cn.itcast.day3.aopframework; 进口 java.io.IOException的; 进口 的java.io.InputStream; 进口 java.u ...

  8. java Map遍历

    http://www.cnblogs.com/fczjuever/archive/2013/04/07/3005997.html 1. 阐述 对于Java中Map的遍历方式,很多文章都推荐使用entr ...

  9. 我如何踏上IT路

    第一次开技术博客,第一篇博文就聊聊自己是如何走上IT这条路的.一直听人说"搞IT的"颇含贬低色彩,也有IT前辈奉劝不要轻易踏上这条路,但最终我这个本是化学化工专业的门外汉还是义无反 ...

  10. 转载一篇makefile，说的很详细

    March 3, 2015 8:19 PM 原文见:https://www.cnblogs.com/OpenShiFt/p/4313351.html Makefile 文件的编写 学习前的准备 需要准 ...