Home > Developer > JavaScript
First
Slide the mouse over the graph, show the complete picture, remove the Reset:
Simple CSS Plus JS operation DOM implementation:
<!doctype html><html> <head> <meta charset="UTF-8"> <title>Sliding Doors</title> <link rel="stylesheet" href="Styles/reset.css" /> <link rel="stylesheet" href="Styles/slidingdoors.css" / > <script src="Scripts/slidingdoors.js"></script> </head> <body> <div id=' container '> <img src="Images/door1.png" alt="1080P artifact" title ="1080P artifact" /> <img src="Images/door2.png" alt="5.5-inch four-core" Title="5.5-inch four-core" /> <img src="Images/door3.png" alt="Quad core 5 inch" title=" Quad Core 5 inch " /> <img src="Images/door4.png" alt="5.7 inch machine King" title ="5.7 inch machine King" /> </div> </body></html>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; }JS Operation:
Window.onload = function() { //Container object varbox = document.getElementById (' container ');//Get Picture NodeList object collection varIMGs = Box.getelementsbytagname (' img ');//width of single picture varImgWidth = imgs[0].offsetwidth;//Set the width of hidden door body exposed varExposewidth = the;//Set total container width varBoxwidth = ImgWidth + (Imgs.length-1) * EXPOSEWIDTH; Box.style.width = Boxwidth +' px ';//Set the initial position of each door function setimgspos() { for(vari =1, Len = imgs.length; i < Len; i++) {imgs[i].style.left = ImgWidth + exposewidth * (i-1) +' px '; }} setimgspos ();//Calculate the distance that should be moved when each door is opened vartranslate = Imgwidth-exposewidth;//Bind events for each door for(vari =0, Len = imgs.length; i < Len; i++) {//Use the function table to call immediately, in order to obtain a different I-value( function(i) {Imgs[i].onmouseover = function() { //Reset each door firstSetimgspos ();//Open Door for(varj =1; J <= I; J + +) {Imgs[j].style.left =parseint(Imgs[j].style.left,Ten)-Translate +' px ';//imgs[j].style.left = j*exposewidth + "px";} }; Imgs[i].onmouseout = function(){Setimgpos (); }; }) (i); }};Copyright NOTICE: This article is the original article, reproduced please specify: http://blog.csdn.net/i10630226
Ultra-Practical JavaScript code Snippet ITEM5--image sliding effect implementation
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
