超实用的JavaScript代码段 Item5 --图片滑动效果实现

时间：2022-12-13 09:54:57

先上图

超实用的JavaScript代码段 Item5 --图片滑动效果实现

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

超实用的JavaScript代码段 Item5 --图片滑动效果实现

简单的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对象的&lpar;深&rpar;拷贝

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

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

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

随机推荐

  1. 问题-&lbrack;Access&rsqb;&OpenCurlyDoubleQuote;无法打开工作组信息文件中的表 &&num;39&semi;MSysAccounts&&num;39&semi;”的问题的解决方法

    问题现象:ado.net oledb方式访问Access数据库文件时报错“无法打开工作组信息文件中的表 'MSysAccounts'”的问题的解决方法  问题处理:1.数据库名称不能命名为:Syste ...

  2. 深入剖析Java中的装箱和拆箱（转）

    自动装箱和拆箱问题是Java中一个老生常谈的问题了,今天我们就来一些看一下装箱和拆箱中的若干问题.本文先讲述装箱和拆箱最基本的东西,再来看一下面试笔试中经常遇到的与装箱.拆箱相关的问题. 以下是本文的 ...

  3. 关于url路径的定义方式

    一.概述 无论是做网页,还是WEB系统,我们都会用到链接,图片,文件的地方,这些地方都涉及到路径的问题,例如:background-image:url();这一CSS样式,而url()的定义方式有两种 ...

  4. js之with

    网上找资料的时候看到有js代码里出现了大量的with语句,有点好奇,这里做下总结: 1)简要说明         with 语句可以方便地用来引用某个特定对象中已有的属性,但是不能用来给对象添加属性. ...

  5. Spring各jar包作用及依赖

    先附spring各版本jar包下载链接http://repo.spring.io/release/org/springframework/spring/ spring.jar 是包含有完整发布模块的单 ...

  6. const 相关知识 const和指针、const和引用

    以前老是对const概念不清不楚,今天算是好好做个笔记总结一下.以下内容包括1)常量指针(指针本身是常量),2)指针常量(指针指向的是常量对象),3)常量引用,4)const成员函数. 常量指针,指针 ...

  7. 设置linux虚拟机的固定ip、防火墙的一些操作

    安装好虚拟机后,需要设置其固定ip,这样才可以连接该虚拟服务器 设置步骤如下 1.进入network-scripts目录 cd /etc/sysconfig/network-scripts 2.编辑n ...

  8. 【TensorFlow基础】tf&period;add 和 tf&period;nn&period;bias&lowbar;add 的区别

    1. tf.add(x,  y, name) Args: x: A `Tensor`. Must be one of the following types: `bfloat16`, `half`, ...

  9. Hbase写Hfile报错：Trying to load more than 32 hfiles to one family of one region

    在写Hfile的时候 ,如果一个family下超过了默认的32个hfile,就会报如下错误: ERROR mapreduce.LoadIncrementalHFiles: Trying to load ...

  10. 【译】6&period; Java反射——Getter和Setter

    原文地址:http://tutorials.jenkov.com/java-reflection/getters-setters.html ============================== ...

相关文章