Js dom enables the mouse to slide the image, jsdom

Js dom enables the mouse to slide the image, jsdom

Often, when we browse various web pages, there will be a variety of animation effects, as shown in a lot of online shopping mall commonly used goods display methods, similar products are displayed side by side on the window, if you want to view the details of a product, you just need to hover your mouse over the product area, and the product that was originally folded will automatically expand. The details will be displayed in front of the user, this animation is implemented by combining DOM + JS. Today's small exercises are designed to achieve this effect.

First, implement the Basic page framework in html, and encapsulate the four images in a div block named "iner ".

<! Doctype html> <meta charset = "UTF-8"> 

Then, I modified the general style with two style sheets as follows:
Is
Slidingdoors.cssand 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, span, applet, 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,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, 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: none;}blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;}table { border-collapse: collapse; border-spacing: 0;}
Next, we need to achieve the sliding effect. The 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 result is as follows:

Problems:
1. I and j variables in the image reset function cannot be clearly divided;
2. After resetting an image, the remaining unreset images are blocked, mainly because the reset function has a small problem.
Experience:JavaScript function variables are complex and logically rigorous. Be careful when writing code.
The above is all the content of this article, hoping to help you learn.
Articles you may be interested in:

  

 
   
Js automatic slide + mouse Slide Area
 
   
Javascript table beautify mouse sliding cell color
 
   
Simple and common JS sliding door code
 
   
JavaScript code used to determine the horizontal and vertical screens and to disable the browser slide entries
 
   
Use native js to encapsulate the sliding effect of webapp (Inertial sliding and sliding rebound)
 
   
How to hide a menu by sliding down the mouse in js
 
   
Javascript enables displaying and hiding Baidu map mouse sliding events
 
   
Complete javascript mouse sliding score control example
 
   
JavaScript code for sliding menu effects by clicking the mouse in the upper left corner
 
   
How to change the sliding door to a tab (with a mouse clicks required) in JS