<!doctype html>
Reset.css
/** * Eric Meyer ' s Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com * * html, body, Div, Spans, applets, 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, F Ieldset, form, label, legend, table, Caption, Tbody, TFOOT, THEAD, tr, TH, TD, Article, aside, canvas, details, embed, fi Gure, 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:n
One } Blockquote:before, Blockquote:after, Q:before, q:after {content: ';
Content:none;
} table {border-collapse:collapse;
border-spacing:0; }
Slidingdoors.css
#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;
}
Slidingdoors.js
window.onload=function () {//container object var box = document.getElementById (' container ');
Get Picture NodeList object Set var IMGs = Box.getelementsbytagname (' img ');
Single-picture width var imgwidth=imgs[0].offsetwidth;
Set Hidden door body exposed width var exposewidth=160;
Set the total width of the container var boxwidth=imgwidth+ (imgs.length-1) *exposewidth;
box.style.width=boxwidth+ ' px '; Set the initial position of each door function Setimgspos () {for (Var i=1,len=imgs.length;i<len;i++) {Imgs[i].style.left=imgwidth+exposewi
dth* (i-1) + ' px ';
} setimgspos ();
Calculate the distance to be moved when each door is opened Var translate=imgwidth-exposewidth; Bind event for per door for (Var i=0,len=imgs.length;i<len;i++) {//Use function expression called immediately, in order to get different I values (function (i) {imgs[i].onmouseover=f
Unction () {//First reset each door setimgspos ();
Open door for (var j=1;j<=i;j++) {imgs[j].style.left=parseint (imgs[j].style.left,10)-translate+ ' px ';
}
};
}) (i); }
};