Often, when we are browsing various web pages, will have a variety of animation effects show, as shown in the figure below is a lot of online shopping malls commonly used to show the way, the same kind of goods displayed in the window, the user if you fancy what kind of goods want to see details, as long as the mouse put on the area of the product, Originally folded up the merchandise will automatically unfold, the details of the exhibition now before the user, and this animation, is to use the combination of DOM+JS to achieve, today's small exercise is to achieve this effect.
First, the basic frame of the page is implemented in HTML, and four diagrams are encapsulated in a div block called "container."
<!doctype html> <meta charset= "UTF-8" >
Next, I decorated the general style with two style sheets as follows:
Followed by
Slidingdoors.css and reset.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; }
/** * 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, DE
L, 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, F Igure, 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; }
Next, it is necessary to achieve the sliding effect, JS code is as follows:
Window.onload=function () {
var Box=document.getelementbyid ("container");
var imgs=box.getelementsbytagname ("img");
var imgwidth=imgs[0].offsetwidth;
var exposewidth=160;
var boxwidth=imgwidth+exposewidth* (imgs.length-1);
box.style.width=boxwidth+ ' px ';
function Setimgpos () {for
(var i=1;i
The results of the finished picture are as follows:
The problems encountered:
1. The picture resets the function the I, the J variable is silly to divide clearly;
2. Make out the effect of a picture reset after the rest of the pictures are blocked, mainly reset function out of a small problem.
experience:JS function variable complex, logical rigorous, write code must be careful
The above is the entire content of this article, I hope to help you learn.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
