Javascript image slide effect, javascript image slide

Javascript image slide effect, javascript image slide

This article shares with you how to implement javascript image sliding. The specific content is as follows:

Move the mouse over the image to show the complete image. If you remove the image, reset it:

Simple CSS and JS operations DOM implementation:

<! Doctype 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 operations:
Window. onload = function () {// container object var box = document. getElementById ('Container'); // get the image NodeList object set var imgs = box. getElementsByTagName ('img '); // The width of a single image var imgWidth = imgs [0]. offsetWidth; // set var exposeWidth = 180 to hide the width exposed by the door; // set the total width of the container var boxWidth = imgWidth + (imgs. length-1) * exposeWidth; box. style. width = boxWidth + 'px '; // you can specify the initial position of each gate. function setImgsPos () {for (var I = 1, len = imgs. length; I <len; I ++) {imgs [I]. style. left = imgWidth + exposeWidth * (I-1) + 'px ';}} setImgsPos (); // calculates the distance from var translate = imgWidth-exposeWidth when each door is opened; // bind the event for (var I = 0, len = imgs. length; I <len; I ++) {// use the answer of the function table called immediately to obtain different I values (function (I) {imgs [I]. onmouseover = function () {// reset each door to setImgsPos (); // open the door for (var j = 1; j <= I; j ++) {imgs [j]. style. left = parseInt (imgs [j]. style. left, 10)-translate + 'px '; // imgs [j]. style. left = j * exposeWidth + "px" ;}}; imgs [I]. onmouseout = function () {setImgPos () ;}}) (I );}};
I hope this article will help you learn about javascript programming.