<!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. ubuntu安装libxml2--PC端

    莫名其妙的安装了libxml2,其实电脑本身就有的,不知道有木有影响 具体安装步骤:1.解压:$tar zxvf  libxml2-2.9.4.tar.gz  //解压在了/home/newday/下 ...

  2. JSON--JavaScript Object Notation

    概念 一种轻量级的数据交换格式,本质是特定格式的字符串,是客户端和服务器端交互数据的常用选择 规则 []集合 [value1,value2] {}对象 {key1:value1,key2,value2 ...

  3. ZOJ-1239 Hanoi Tower Troubles Again!

    链接:ZOJ1239 Hanoi Tower Troubles Again! Description People stopped moving discs from peg to peg after ...

  4. eclipse for java developer和eclipse for java ee developer的区别

    eclipse是基于插件机制的软件,插件本身是不能启动和操作的,它们需要一个环境,eclipse使用osgi r4规范实现了这个环境. osgi是java动态模块化的规范,该规范不光要让java程序模 ...

  5. 【003：jsoncpp的简单使用】

    #include <json/json.h> #include <iostream> #include <string> using namespace std; ...

  6. SQL语句增加字段、修改字段、修改类型、修改默认值

    一.修改字段默认值 alter table 表名 drop constraint 约束名字   ------说明:删除表的字段的原有约束 alter table 表名 add constraint 约 ...

  7. iOS GCD 编程小结

    一.简单介绍 1.GCD简介? 全称是Grand Central Dispatch,可译为“牛逼的中枢调度器” 纯C语言,提供了非常多强大的函数 2.GCD优势 GCD是苹果公司为多核的并行运算提出的 ...

  8. VB 中 NumericUpDown 控件 如何为手动输入设定触发事件

    Private Sub numDuration_KeyUp(ByVal sender As Object, ByVal e As System.Windows.Forms.KeyEventArgs) ...

  9. [课程设计]Sprint Three 回顾与总结&发表评论&团队贡献分

    Sprint Three 回顾与总结&发表评论&团队贡献分 ● 一.回顾与总结 (1)回顾 燃尽图: Sprint计划-流程图: milestones完成情况如下: (2)总结 本次冲 ...

  10. esponse.sendRedirect方式的转向与RequestDispatcher的forward方法的比较

    esponse.sendRedirect方式的转向与RequestDispatcher的forward方法的比较 JavaWeb开发中,采用MVC模式的时候,在控制器完成模型的调用之后会选择界面对用户 ...