<!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. sh脚本异常:/bin/sh^M:bad interpreter: No such file or directory

    在Linux中执行.sh脚本,异常/bin/sh^M: bad interpreter: No such file or directory. 分析:这是不同系统编码格式引起的:在windows系统中 ...

  2. Django根据现有数据库建立model

    Django引入外部数据库还是比较方便的,步骤如下 创建一个项目,修改seting文件,在setting里面设置你要连接的数据库类型和连接名称,地址之类,和创建新项目的时候一致 运行下面代码可以自动生 ...

  3. TP框架常用(一)

    25.显示最后一条查询的sql语句:主要用于在连贯操作时,检测拼接的sql语句是否正确 echo $this->db->last_query();//如:select * from pt_ ...

  4. 关于使用FusionCharts生成图表时出现invalid xml data错误提示的解决方法

    FusionCharts的确功能是够强大的.收集的功能估计更强大.在初次使用时,对着手册,一步一步操作,就是生成图表工具不成功.一直报"Invalid xml data"错误.后面 ...

  5. iframe

    var ifr = document.getElementById('ifr'); var win = ifr.window || ifr.contentWindow; win.a(); // 调用i ...

  6. java布局学习 (一)

    Java 程序通过jvm可以很好的移植到其他平台上,但是java 生成的图形界面样式,在不使用布局的情况下,往往需要重新设定大小,才能在新的平台上调整到最佳样式.这是由于组件的最佳大小 往往是与平台相 ...

  7. String 与StringBuilder有什么区别

    C# String 对象是不可改变的.每次使用 System.String 类中的方法之一时,都要在内存中创建一个新的字符串对象,这就需要为该新对象分配新的空间.在需要对字符串执行重复修改的情况下,与 ...

  8. oracle优化:避免全表扫描(高水位线)

    如果我们查询了一条SQL语句,这条SQL语句进行了全表扫描,那到底是扫描了多少个数据块呢?是表有多少数据,就扫描多少块吗?不是的.而是扫描高水位线一下的所有块.有的时候有人经常说,我的表也不大呀,怎么 ...

  9. http错误码大全?

    响应码由三位十进制数字组成,它们出现在由HTTP服务器发送的响应的第一行.响应码分五种类型,由它们的第一位数字表示:1.1xx:信息,请求收到,继续处理2.2xx:成功,行为被成功地接受.理解和采纳3 ...

  10. OC-03类的声明和实现

    例子 //类名:Car//属性:轮胎个数.时速//行为:跑 #import<Foundation/Foundation.h >//完整的写一个函数:函数的声明和定义(实现)//完整的写一个 ...