JS实现滑动门效果

html部分

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #d74200 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #289c97 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4f5d66; min-height: 36.0px }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4f5d66 }
span.s1 { color: #4f5d66 }
span.s2 { color: #2b7ec3 }
span.s3 { color: #48565d }
span.s4 { color: #289c97 }
span.s5 { color: #d74200 }
span.Apple-tab-span { white-space: pre }

<html>

<head>

</head>

<body>

</div>

</body>

</html>

slidingdoors.css部分

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4a8a01 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #a5b2b9 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #929151 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #d74200 }
span.s1 { color: #929151 }
span.s2 { color: #4f5d66 }
span.s3 { color: #48565d }
span.s4 { color: #ad42ef }
span.s5 { color: #698906 }
span.s6 { color: #d16400 }
span.s7 { color: #000000 }
span.Apple-tab-span { white-space: pre }

img{

height: 400px;

position: absolute;

display: block;

left: 0;

/*border-left: 2px solid gray;*/

}

#container{

height: 400px;

margin: 0 auto;

border-right: 2px solid #ccc;

border-bottom: 2px solid #ccc;

overflow: hidden;

position: relative;

}

js部分

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4663cc }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #a5b2b9 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4f5d66 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #e48b00 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; min-height: 36.0px }
span.s1 { color: #4a8a01 }
span.s2 { color: #4f5d66 }
span.s3 { color: #e48b00 }
span.s4 { color: #698906 }
span.s5 { color: #000000 }
span.s6 { color: #4663cc }
span.s7 { color: #289c97 }
span.s8 { color: #ad42ef }
span.s9 { color: #b58a00 }
span.Apple-tab-span { white-space: pre }

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 + exposeWidth * (imgs.length - 1);

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

//设置每道门的初始位置

function setImgsPos() {

for(var i = 1; i < imgs.length; i++) {

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

}

setImgsPos();

//计算每道门打开时应移动的距离

var translate = imgWidth - exposeWidth;

//为每道门绑定事件

for(var i = 0; i < imgs.length; 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)-translate+"px";

}

})(i);

}

reset css部分

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #a5b2b9 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; min-height: 36.0px }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4a8a01 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #d16400 }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #929151 }
span.s1 { color: #48565d }
span.s2 { color: #4f5d66 }
span.s3 { color: #929151 }
span.s4 { color: #ad42ef }
span.s5 { color: #698906 }
span.s6 { color: #2b7ec3 }
span.s7 { color: #d16400 }
span.s8 { color: #289c97 }
span.Apple-tab-span { white-space: pre }

/* http://meyerweb.com/eric/tools/css/reset/

v2.0 | 20110126

License: none (public domain)

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

JS实现滑动门效果的更多相关文章

【原生JS】滑动门效果
效果图: 思路:通过每次鼠标移动至目标上使所有图片重置为初始样式再向左移动目标及其左侧每个图片隐藏部分距离即实现. HTML: <!DOCTYPE html> <html> & ...
JS切割图片-滑动门效果
转载请注明来源:https://www.cnblogs.com/hookjc/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
HTML+CSS技术实现网页滑动门效果
一.什么是滑动门大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门. 小米官网,网页滑动门效果二.实 ...
js实现滑动器效果
最近公司在做一个项目,页面中要用到滑动器效果,我的第一反应是使用HTML5 input类型中的range类型,但马上我就否定了这个想法,因为range类型存在浏览器的兼容性问题(在主流浏览器中).但又 ...
[Js]滑动门效果
描述:鼠标移动到一副图片上,会显示该副图片的全貌,而其他图片会显示概貌一.没有动画效果的运动思路: 1.定好每张图片的初始位置(第一张完全显示,234只露出一部分) 2.计算每道门的移动距离(即未 ...
DIV+CSS滑动门效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
[Jquery]滑动门效果
$(function(){ var $box=$("#box"); var $img=$box.find("img"); var imgWid ...
Javascript学习笔记2.2 Javascript与DOM选项卡（滑动门）案例详解
学习了DOM的知识,今天开始做些练习,想到了一个网页滑动门的特效,见下图: 1.通过建立索引实现 <!doctype html> <html> <head> < ...
js 滑动门的实现
原理:滑动门,这里以图片进行实例,首先设定主盒子div的宽度和高度设定,并进行图片初始化位置的设定,然后将图片绑定事件,并设定要达到的效果 html代码: <!DOCTYPE html> ...

随机推荐

mybatis处理一对一查询
有班级表,老师表,要求给定班级id查出班级信息和班级对应的老师信息 1.使用嵌套结果方式 sql语句: <select id="findClasses" parameterT ...
Javascript 基础知识学习--javascript中的参数传递都是按值传递的
ECMAScript中所有函数的参数传递都是按值传递的,无论参数是值类型还是引用类型的.过去我跟大多数人一样觉得跟传值类型相关. 自己写了一个测试的例子,确实如此 function add(a) { ...
[DFNews] EIFT更新至1.2，支持iPhone4s及iPhone5物理获取
俄罗斯厂商Elcomsoft近日更新了其旗下的iOS取证软件Elcomesoft iOS Forensic Toolkit,更新后的1.2版本支持针对iOS 4-6的iPhone 4s.iPhone5 ...
inline-block和block的区别
<html> <head> <style> body,ul,li,span{padding:0px;margin:0px;} </style> < ...
Linux字符界面下用户账户的设置
在Linux系统字符界面下创建.修改以及删除用户账户主要使用useradd,usermod和userdel这3个命令. 一.创建用户账户创建用户账户就是在系统中创建一个新账户,然后为新账户分配用户U ...
yum install mysql
rpm -qa|grep -i mysqlmysql-libs-5.1.52-1.1.alios6.1.x86_64mysql-5.1.52-1.1.alios6.1.x86_64mysql-deve ...
window.parent
今天出现了一个严重的bug,页面在载入时居然导致了页面崩溃,找了近5个小时的代码,才找到了原因(擦,我只能说我水平有限,浪费了太长时间了~). 源代码: var curr = window; whil ...
cookie sessionStorage localStorage 区别
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...
SqlDataReader的使用
1.建立数据库连接: 2.设置数据库指令: 3.数据拾取器接收输出的数据: 4.遍历打印数据: using System; using System.Collections.Generic; usin ...
深入理解js——继承
JavaScript中继承是通过原型链来体现的. function Foo(){} var f1=new Foo(); f1.a=10; Foo.prototype.a=100; Foo.protot ...

JS实现滑动门效果

JS实现滑动门效果的更多相关文章

随机推荐

热门专题