<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>slideDoor</title>

         <link type="text/css" rel="stylesheet" href="../common/reset.css" />

         <link type="text/css" rel="stylesheet" href="css/slideDoor.css" />

     </head>

     <body>

         <div id='container'>

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

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

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

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

         </div>

     </body>

     <script type="text/javascript" src="js/slideDoor.js"></script>

 </html>
#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;

}

　　

window.onload = function() {

	// 容器对象

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

	// 获得图片的集合

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

	var len = imgs.length;

	// 单张图片的宽度

	var imgWidth = imgs[0].offsetWidth;

	// 图片露出的宽度

	var exposeWidth = 160;

	// 设置容器的总宽度

	var boxWidth = imgWidth + (len - 1) * exposeWidth;

	// 每个door 滑动的距离

	var translate = imgWidth - exposeWidth;

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

	// 设置door 的初始位置

	function setImgsPos() {

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

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

		}

	}

	setImgsPos();

	// 为door 绑定事件

	for (var i = 0; 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';

				}

			}

		})(i);

	}

}

　　

slideDoor（学习某编程网站的，仅作记录和学习）的更多相关文章

  1. 【转】手把手教你读取Android版微信和手Q的聊天记录(仅作技术研究学习)

    1.引言 特别说明:本文内容仅用于即时通讯技术研究和学习之用,请勿用于非法用途.如本文内容有不妥之处,请联系JackJiang进行处理!   我司有关部门为了获取黑产群的动态,有同事潜伏在大量的黑产群 ...

  2. 手把手教你读取Android版微信和手Q的聊天记录(仅作技术研究学习)

    1.引言 特别说明:本文内容仅用于即时通讯技术研究和学习之用,请勿用于非法用途.如本文内容有不妥之处,请联系JackJiang进行处理!   我司有关部门为了获取黑产群的动态,有同事潜伏在大量的黑产群 ...

  3. 写的cursor demo仅作记录

    declare @objectID int; declare objcur cursor for object_id from m_object open objcur fetch next from ...

  4. nil和Nil及NULL的区别（仅作记录）

    今天在研究红黑树的时候一直提到一个NIL节点,百度了一下,这里仅作记录 nil是一个对象值,如果要把一个对象设置为空的时候就用nil.Nil是一个类对象的值,如果要把一个Class类型的对象设置为空的 ...

  5. .net core 命令行（仅作记录）

    命令大全:dotnet 命令 创建NuGet包:如何使用 .NET Core 命令行接口 (CLI) 工具创建 NuGet 包

  6. windows10下找回照片查看器的方法（仅作记录）

    Windows Registry Editor Version 5.00 ; Change Extension's File Type [HKEY_CURRENT_USER\Software\Clas ...

  7. 通过ajax方式在界面上加载loading状态(仅作记录)

    1 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, 2 pre, a, ab ...

  8. 如何优雅地学习计算机编程-C++1

    如何优雅的学习计算机编程--C++ 0.导入 如何优雅地学习计算机编程.我们得首先了解编程是什么?打个比方--写信. 大家都知道写信所用的语言双方都懂,这样的信才做到了信息交流,人和计算机也是如此人和 ...

  9. PYTHON 实现的微信跳一跳【辅助工具】仅作学习

    备注原地址:https://my.oschina.net/anlve/blog/1604163 我又做了一些优化,防止WX检测作弊 准备环境: Windows 10安卓手机,源码中有适配ios,然后链 ...

随机推荐

  1. MWeb for iOS 测试版介绍

    目前已开始第二次测试:MWeb for iOS 版本发布说明,更新至第二次测试版本  上图为 MWeb for iOS 的图标,再次感谢 @Producter http://weibo.com/u/ ...

  2. jqgrid笔记

    //重置列表请求url var url = "url?name="+name; $(grid_list_selector).jqGrid('setGridParam',{url:u ...

  3. Android中使用Handler造成内存泄露的分析和解决

    什么是内存泄露?Java使用有向图机制,通过GC自动检查内存中的对象(什么时候检查由虚拟机决定),如果GC发现一个或一组对象为不可到达状态,则将该对象从内存中回收.也就是说,一个对象不被任何引用所指向 ...

  4. 【MongoDB for Java】Java操作MongoDB

    上一篇文章: http://www.cnblogs.com/hoojo/archive/2011/06/01/2066426.html介绍到了在MongoDB的控制台完成MongoDB的数据操作,通过 ...

  5. js基础练习二之简易日历

    今天学到了js基础教程3,昨天的课后练习还没来的及做,这个是类似简易日历的小案例,视频还没听完,今晚继续...... 先看效果图: 其实做过前面的Tab选项卡,这个就很好理解了,通过鼠标放在不同月份月 ...

  6. Nginx：轻量级高性能的Web服务器

    Nginx ("engine x") 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器.Nginx是由Igor Sysoev为俄罗斯访问量第二的R ...

  7. python学习笔记之基础二（第二天）

    1.编码转换介绍        unicode是最底层.最纯的,会根据终端的编码进行转化展示 一般硬盘存储或传输为utf-8(因为省空间.省带宽),读入内存中为unicode,二者如何转换 a = ' ...

  8. angularJS——ng-bind指令与插值的区别

    在AngularJS中显示模型中的数据有两种方式: 一种是使用花括号插值的方式: <p>{{text}}</p> 另一种是使用基于属性的指令,叫做ng-bind: <p ...

  9. SSH框架整合项目（一）——搭建平台和引入依赖

    前言:这个项目是我的第一个实验性项目,最初的立意是制作一个个性化的BBS.由于BBS能够综合大部分功能,因此作为练手的项目来说再好不过.从写第一行代码到完成测试版大概历时2周.中间遇到了不少以前在学习 ...

  10. C# DllImport“调用导致堆栈不对称。原因可能是托管的 PInvoke 签名与非托管的目标签名不匹配。请检查 PInvoke 签名的调用约定和参数与非托管的目标签名是否匹配 ”

    调用外部dll时,出现如下问题 C# DllImport“调用导致堆栈不对称.原因可能是托管的 PInvoke 签名与非托管的目标签名不匹配.请检查 PInvoke 签名的调用约定和参数与非托管的目标 ...