先上图

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

简单的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. Python和shell中Base64编码使用那些事

    做开发第一个接触的编码方式就是Base64,当时是用url来传输一些参数,传输的两端会用Base64来编码和解码,保证数据不被url转义破坏. 下面是 维基百科 Base64 中的介绍,其实自己实现起 ...

  2. SDWebimage的原理和使用机制

    对于ASIHttp请求和AFNetworking请求都有关于图片缓存机制的使用,但是相对于专注运用在图片使用的SDWebimage来说,又有不一样的使用效果,最主要的体现在缓存数据的转换. SDWeb ...

  3. Java IO学习--(三)通道

    Java IO中的管道为运行在同一个JVM中的两个线程提供了通信的能力.所以管道也可以作为数据源以及目标媒介. 你不能利用管道与不同的JVM中的线程通信(不同的进程).在概念上,Java的管道不同于U ...

  4. Java 8 Stream

    1.关于Java8部分新特性介绍 Java8的新特性很多,在此就不一一介绍了,这里只说一下我自己在工作用用得比较多的几点: 1.1.Lambda表达式 Lambda允许把函数作为一个方法的参数(函数作 ...

  5. CSS3实现多种背景效果

    灵活的背景定位 实现效果: 将背景图定位到距离容器底边 10px 且距离右边 20px 的位置. background-position 方案 实现代码: <div>海盗密码</di ...

  6. python结巴(jieba)分词

    python结巴(jieba)分词 一.特点 1.支持三种分词模式: (1)精确模式:试图将句子最精确的切开,适合文本分析. (2)全模式:把句子中所有可以成词的词语都扫描出来,速度非常快,但是不能解 ...

  7. Redis实际开发中常见问题

    首先redis作为缓存,一般作为缓存有2个用途,快速访问和减少IO频率,所谓减少IO频率就是等缓存积累到一定大小然后一次刷入磁盘进行持久化. 一般的设计就是客户端往数据库里更新或者读写数据,redis ...

  8. myeclipse 的Customize Perspective 没有反应

    MyEclipse 2014 工具栏里的Quick Access老是跳上跳下的,弄得我很烦,所以就想自定义一下工具栏,结果 window--> customize perspective 没用 ...

  9. Python绘图之matplotlib基本语法

    Matplotlib 是一个 Python 的 2D绘图库,通过 Matplotlib,开发者可以仅需要几行代码,便可以生成绘图,直方图,功率谱,条形图,错误图,散点图等.当然他也是可以画出3D图形的 ...

  10. css初始化标签属性--源码

    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote ...