你的位置:首页 > Java教程

[Java教程]JS实现滑动门效果


html部分

<html>

<head>

<meta charset="UTF-8">

<title></title>

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

<link rel="stylesheet" href="css/slidingdoors.css" />

 

</head>

<body>

<div id="container">

<img src="img/001.jpg"/>

<img src="img/002.jpg"/>

<img src="img/003.jpg"/>

<img src="img/004.jpg"/>

</div>

</body>

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

</html>

 

slidingdoors.css部分

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部分

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部分

 

/* 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;

}