slideDoor（学习某编程网站的，仅作记录和学习）
<!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（学习某编程网站的，仅作记录和学习）的更多相关文章
- 【转】手把手教你读取Android版微信和手Q的聊天记录(仅作技术研究学习)
1.引言 特别说明:本文内容仅用于即时通讯技术研究和学习之用,请勿用于非法用途.如本文内容有不妥之处,请联系JackJiang进行处理! 我司有关部门为了获取黑产群的动态,有同事潜伏在大量的黑产群 ...
- 手把手教你读取Android版微信和手Q的聊天记录(仅作技术研究学习)
1.引言 特别说明:本文内容仅用于即时通讯技术研究和学习之用,请勿用于非法用途.如本文内容有不妥之处,请联系JackJiang进行处理! 我司有关部门为了获取黑产群的动态,有同事潜伏在大量的黑产群 ...
- 写的cursor demo仅作记录
declare @objectID int; declare objcur cursor for object_id from m_object open objcur fetch next from ...
- nil和Nil及NULL的区别（仅作记录）
今天在研究红黑树的时候一直提到一个NIL节点,百度了一下,这里仅作记录 nil是一个对象值,如果要把一个对象设置为空的时候就用nil.Nil是一个类对象的值,如果要把一个Class类型的对象设置为空的 ...
- .net core 命令行（仅作记录）
命令大全:dotnet 命令 创建NuGet包:如何使用 .NET Core 命令行接口 (CLI) 工具创建 NuGet 包
- windows10下找回照片查看器的方法（仅作记录）
Windows Registry Editor Version 5.00 ; Change Extension's File Type [HKEY_CURRENT_USER\Software\Clas ...
- 通过ajax方式在界面上加载loading状态(仅作记录)
1 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, 2 pre, a, ab ...
- 如何优雅地学习计算机编程-C++1
如何优雅的学习计算机编程--C++ 0.导入 如何优雅地学习计算机编程.我们得首先了解编程是什么?打个比方--写信. 大家都知道写信所用的语言双方都懂,这样的信才做到了信息交流,人和计算机也是如此人和 ...
- PYTHON 实现的微信跳一跳【辅助工具】仅作学习
备注原地址:https://my.oschina.net/anlve/blog/1604163 我又做了一些优化,防止WX检测作弊 准备环境: Windows 10安卓手机,源码中有适配ios,然后链 ...
随机推荐
- Leetcode: Minimum Unique Word Abbreviation
A string such as "word" contains the following abbreviations: ["word", "1or ...
- git基本配置
用户信息 你个人的用户名称和电子邮件地址,用户名可随意修改,git 用于记录是谁提交了更新,以及更新人的联系方式. $ git config --global user.name "Donl ...
- Jquery,jquery-cookie.js 做的点击记住用户名和密码！
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Html5特性及简介
- Eclipse快捷键
http://www.blogjava.net/action/articles/17339.html http://blog.csdn.net/keenweiwei/article/details/3 ...
- s3c2440 上txt 小说阅读器
文件结构 Makefile: CROSSCOMPILE := arm-linux- CFLAGS := -Wall -O2 -c LDFLAGS := -lm -lfreetype CC := $(C ...
- 30分钟学会如何使用Shiro
本篇内容大多总结自张开涛的<跟我学Shiro>原文地址:http://jinnianshilongnian.iteye.com/blog/2018936 我并没有全部看完,只是选择了一部分 ...
- C# 获取指定目录下所有文件信息、移动目录、拷贝目录
/// <summary> /// 返回指定目录下的所有文件信息 /// </summary> /// <param name="strDirectory&qu ...
- 关闭编辑easyui datagrid table
var rows = dg.datagrid('getRows'); for (var i = 0; i < rows.length; i++) { dg.datagrid( ...
- Java Programming Language Enhancements
引用:Java Programming Language Enhancements Java Programming Language Enhancements Enhancements in Jav ...