Details about how JS achieves the sliding door effect and how js implements the sliding door

Details about how JS achieves the sliding door effect and how js implements the sliding door

This article describes how to implement the sliding door effect in JS. We will share this with you for your reference. The details are as follows:

Description: When you move the cursor over an image, the full picture of the image is displayed. Other images are displayed as follows:

1. motion without animation effect

Ideas:

1. determine the initial position of each image (the first image is fully displayed, and only one part is shown)
2. Calculate the moving distance of each door (that is, the invisible part)
3. Bind a mouse slide event

Window. onload = function () {var box = document. getElementById ("box"); var img = box. getElementsByTagName ("img"); // The width of a single image var imgWidth = img [0]. offsetWidth; // The exposed width var exposeWidth = 160; // set the total width of the container var boxWidth = imgWidth + exposeWidth * (img. length-1) box. style. width = boxWidth + "px"; // set the initial position of the image function setImgspos () {for (var I = 1, len = img. length; I <len; I ++) {// len defines the number of img in the initialization statement of the for loop, for (var I = 1; I 
2. Expand the acceleration, close, and slow down movements
Note: When you set the initial position of each door, you do not need to write a function. Because you need to write the Opening and Closing animations separately, it will cause a lag and flash instantly.
Ideas:
1. move the cursor over the initial position of the door.
2. move the cursor over the end of the door.
3. A speed and timer are required to complete the process of moving slowly.
Window. onload = function () {var box = document. getElementById ("box"); var img = box. getElementsByTagName ("img"); // The width of a single image var imgWidth = img [0]. offsetWidth; // The exposed width var exposeWidth = 160; // set the total width of the container var boxWidth = imgWidth + exposeWidth * (img. length-1) box. style. width = boxWidth + "px"; // set the initial position of the image for (var I = 1, len = img. length; I <len; I ++) {img [I]. pos = img [I]. style. left = imgWidth + exposeWidth * (I-1) + "px";} function openDoor (e L, translate) {var begin = parseInt (el. pos); var end = begin-translate; var iSpeed = 10; setTimeout (function () {el. style. left = parseInt (el. style. left)-iSpeed + "px"; // Why not use begin? ISpeed * = 1.5 for each initial position; // if (parseInt (el. style. left) <= end) {el. style. left = end + "px";} else {setTimeout (arguments. callee, 25); // The timer can be called directly with a name. If there is no name, the native js method arguments will be used. callee }}, 25) ;}; function closeDoor (el, translate) {var begin = parseInt (el. pos)-translate; // closed by default, the open var end = begin + translate; // you can directly write var end = parseInt (el. pos); var iSpeed = 100; setTimeout (function () {el. style. left = parseInt (el. Style. left) + iSpeed + "px"; // Why not use begin? ISpeed = Math. ceil (iSpeed * 0.7); // if (parseInt (el. style. left)> = end) {el. style. left = end + "px";} else {setTimeout (arguments. callee, 25); // The timer can be called directly with a name. If there is no name, the native js method arguments will be used. callee }}, 25) ;}; var translate = imgWidth-exposeWidth; for (var I = 0, len = img. length; I <len; I ++) {(function (I) {img [I]. onmouseover = function () {// open the door and all the loops on the left of the door to for (var j = 1; j <= I; j ++) {openDoor (img [j], translate);} // close all the loops on the right of your own to for (var j = I + 1; j