先上图

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

简单的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. 安卓TV开发（概述） 智能电视之视觉设计和体验分析

         转载说明出处 :http://blog.csdn.net/sk719887916, 作者:skay 前言:移动智能设备的发展,推动了安卓另一个领域,包括智能电视和智能家居,以及可穿戴设备的大 ...

  2. Unity C#用WWW操作数据库

    //在C#中进行GET查询 IEnumerator GETTest() { WWW w = new WWW("http://192.168.1.12/kaohe.php?&id=10 ...

  3. 配置SharePoint环境加域提示网络名不可用[已解决]

    今天去客户给机器做备机,带着装好SharePoint07的机器跑过去了,先做个LAN,然后连上机器开始工作:首先当然是改ip地址,然后都改好了开始加域,加了好几次,发现都不行,提示"指定的网 ...

  4. 和菜鸟一起学linux之initramfs方式启动

    关于initramfs initramfs在编译内核的同时被编译并与内核连接成一个文件,它被链接到地址__initramfs_start处,与内核同时被加载到ram中.initramfs被解析处理后原 ...

  5. 2018年，请不要再使用OLE生成EXCEL文件

    输出EXCEL文件是ABAP开发工作中的常见需求,为了学习相关技术,我翻译过一篇文章:使用OLE2对象创建EXCEL文件,并且一度乐在其中. 最近几个月,经过与若干EXCEL打印程序的艰苦斗争,以及对 ...

  6. getElementById 用法的一个技巧

    假设实现把 TextBox1 的字符实时的拷贝到 TextBox2 中,代码如下: <Script language="Javascript">         fun ...

  7. 2T以上的盘怎么分区， 利用parted创建 linuxTB硬盘GPT分区

    parted创建GPT分区(fdisk不支持创建GPT分区,GPT支持大于2TB分区,MBR不支持) 介绍2种分区表: MBR分区表:(MBR含义:主引导记录) 所支持的最大卷:2T (T; tera ...

  8. Android Studio INSTALL_FAILED_UID_CHANGED 错误

    错误发生于:启动调试时应用安装失败,提示"INSTALL_FAILED_UID_CHANGED". 出现此问题的原因大多是APK卸载不彻底造成冲突. 解决方案: 分别进入 /dat ...

  9. MySql 动态语句

    MyBatis的动态SQL是基于OGNL表达式的,它可以帮助我们方便的在SQL语句中实现某些逻辑. MyBatis中用于实现动态SQL的元素主要有: if choose(when,otherwise) ...

  10. Gson序列化问题导致的内存溢出，tip：Background sticky concurrent mark sweep GC freed

    问题原因,如果在json model里面放了非可序列化的对象就会导致这中问题,可序列化的就是那些基础数据类型和集合类型,如果在里面放个Android的Activity或者adapter这类类型字段,变 ...