先上图

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

简单的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. 【编程练习】收集的一些c++代码片，算法排序，读文件，写日志，快速求积分等等

    写日志: class LogFile { public: static LogFile &instance(); operator FILE *() const { return m_file ...

  2. iOS下如何获取一个类的所有子类

    因为项目中,不同用户切换时,用的是不同数据库,路径不同,而JKDBModel,数据库创建和字段检测,在app一次生命周期里,只会执行一次,所以得考虑账号切换时,创建数据库,需要获取所有JKDBMode ...

  3. LeetCode（26）-Binary Tree Level Order Traversal II

    题目: Given a binary tree, return the bottom-up level order traversal of its nodes' values. (ie, from ...

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

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

  5. 细说Web页面与本地电脑通讯

    话说在很久很久以前.Web页面与客户的本地电脑Localhost通讯,有两种方式: 1.Flash 2.ActiveX控件 由于Flash本人不是很了解,也给出不了什么示例代码, 对于ActiveX控 ...

  6. access treeview读取数据表成树并与子窗体联动

    Private Sub Form_Load()Dim i As IntegerDim rst As DAO.RecordsetSet rst = CurrentDb.OpenRecordset(&qu ...

  7. Android框架之Volley与Glide

    PS:在看到这个题目的同时,你们估计会想,Volley与Glide怎么拿来一块说呢,他们虽然不是一个框架,但有着相同功能,那就是图片处理方面.首先我们先来看一下什么volley,又什么是glide. ...

  8. Day18 Django的深入使用

    在向某一个数据库中插入表的时候,应该在项目下面的models里边写入: class book(models,Model): #book代指的是表名 id=models.AutoField(primar ...

  9. Java中常用的数据结构类

    结构体系图 List ArrayList.LinkedList.Vector有什么区别? ArrayList 只能装入引用对象(基本类型要转换为封装类): 线程不安全: 底层由数组实现(顺序表),因为 ...

  10. ffmpeg 的 tbr tbc 和 tbn的意义

    tbn = the time base in AVStream that has come from the container tbc = the time base in AVCodecConte ...