Use JS to do a simple electronic product Magnifier function

Use JS to make a simple product enlargement chart

The product page of a shopping site often has a product display area. The map area has a function is the product map amplification function, moving the focus area on the left, you can enlarge the details of the view, details such as. The method of implementing this function is also very simple.

Experiment: Make product focus enlarge.

Required skills: 1, the basic method of acquiring page elements;

2, a few simple events;

3. Use DOM to set the attributes of the element;

Case principle: 1, the focus frame follows the mouse event;

2, the mobile area of the focus frame provisions;

3, the display of large box content;

Suitable object: JS Beginner

-------------------------------------------------------------------start! -------------------------------------------------------------

First, we prepare the CSS style, CSS style needs to be aware of several points are:

(1) Focus map relative positioning, default display:none;

(2) The box with large image on the right (hereinafter referred to as large frame) defaults to Display:none; the contents of the large picture box are hidden after the box is overflow overflow:hidden;

Second, start writing script code:

(1) First get the page element:

1 //the first element that you might want to manipulate2     functiongetId (TAG) {//define a method to get an element with an ID, reducing a lot of work! 3         returndocument.getElementById (TAG)4     }5     varBox=getid ("box");6     varSmall=getid ("small");7     varMask=getid ("Mask");8     varBig=getid ("Big");9     varPIC=BIG.CHILDREN[0]; Here is the way to get the element through the node

(2) The explicit mouse movement to the small chart will appear two events: 1) Focus frame to come out; 2) the large picture frame to be displayed. After the same mouse removal, these two leave to cancel

1 // two effects appear on the mouse move to the picture 2     small.onmouseover=function() {3         mask.style.display= "block"; 4         big.style.display= "Block"; 5     }6     small.onmouseout=function() {7         Mask.style.display= "None"; 8         Big.style.display= "None"9     }

(3) Set the following for the focus frame:

1) When the focus frame is set to follow, our follow time is the fact, so the event type here is not onmouseover; but onmousemove;

2) The problem in this code is mainly a mask (focus frame) of the location calculation problem, it is easy to ignore the question is mask is relative to whose location moved? The mask in my CSS style is placed in the small box, so the relative moving position must be the position of the parent element small that it has positioned. So the position coordinates I get with clientx,clienty relative to the browser's current window cannot be used directly, and must be subtracted from the margin value of its parent box.

//set the focus frame of the small graph, follow the mouse;Small.onmousemove=function(e) {varMarginl=Box.offsetleft; Use the Offsetleft method to get the margin-left of boxvarMargint=Box.offsettop; Use the offsettop method to get the margin-top of boxvarcurrentx=E.clientx; varcurrenty=E.clienty; Use E.clientx and e.clinety position relative to the upper-left corner of the browservarX=CURRENTX-MARGINL-MASK.OFFSETWIDTH/2;varY=CURRENTY-MARGINT-MASK.OFFSETHEIGHT/2; To align the center of the focus frame with the mouse, you also need to subtract half the width of the focus frame/----------------------here for a while to insert additional code/---------------------------/Mask.style.left=x+ "px"; Mask.style.top=y+ "px"; Change the position of the focus frame

(4) Movement of the position of the idle focus frame

1) The movement of the focus frame after the completion of the previous step is not subject to any idle, in our browsing the shopping site process, obviously can feel the focus frame does not allow the movement of the outside of the small map, resulting in a bad user experience;

2) to limit the movement of the focus frame, mainly when the x, y changes exceed the allowable value, give him a fixed value;

1  //set the focus frame of the small graph, follow the mouse;2Small.onmousemove=function(e) {3         varMarginl=Box.offsetleft;4         varMargint=Box.offsettop;5         varcurrentx=E.clientx;6         varcurrenty=E.clienty;7         varX=CURRENTX-MARGINL-MASK.OFFSETWIDTH/2;8         varY=CURRENTY-MARGINT-MASK.OFFSETHEIGHT/2;9 Ten         //set the move area for the focus frame One         if(x<0) {x=0;} A         if(x>small.offsetwidth-mask.offsetwidth) -{x=small.offsetwidth-Mask.offsetwidth}; The minimum value for the x used for positioning is 0, and the maximum value is the length of the small-mask the length of the y-axis. -         if(y<0) {y=0;} the         if(Y>small.offsetheight-mask.offsetheight)
{y=small.offsetheight-Mask.offsetheight}; -mask.style.left=x+ "px"; Note that the moving area of the mask is written after the specified move area, note the order of execution of the Code -mask.style.top=y+ "px";

(5) Setting the display of large graphs

1) in the big box to achieve the movement of the picture, you should think of-margin value;

2) How many distances can be moved by using a fixed scale multiplied by the mask left and top values, think about the focus area of the upper-right corner and the upper left corner of the large frame show the location is the same!!! That's not a hard thing to understand.

 1  //  2  var  relativex=< Span style= "color: #000000;" >mask.offsetleft;  3  mask.offsettop;  4  5  6  pic.style.marginleft=-relativex*proporationx+ "px" ; Attention! The value of margin must be negative, "px do not throw away  7  pic.style.margintop=-relativey*proporationy+ "PX"; 

At this point, our demo will be finished! Isn't it simple?

Below I paste the entire code out, I hope to discuss with you about the exchange.

Here is the CSS code

<style> *{margin:0;padding:0; }#box{margin:50px; }#small{width:229px;Height:250px;Border:1px solid Black;text-align:Center;position:relative;float: Left; }#mask{width:100px;Height:100px;Background-color:Rgba (214, 111, 193, 0.3);position:Absolute;Top:0; Left:0;/*Display:none;*/}#big{width:350px;Height:350px;Border:1px solid Black;float: Left;Overflow:Hidden;/*Display:none;*/}</style>

Here is the HTML

<Body><DivID= "box">    <DivID= "small">        <imgsrc= "Small_img.jpg"width= "229"Height= "249"alt=""/>        <DivID= "Mask"></Div>    </Div>    <DivID= "Big">        <imgsrc= "big_img." JPG "width= "549"Height= "All"alt=""/>    </Div></Div>

Here is the JS code

<script>//the first element that you might want to manipulate    functiongetId (tag) {returndocument.getElementById (TAG)}varBox=getid ("box"); varSmall=getid ("small"); varMask=getid ("Mask"); varBig=getid ("Big"); varPic=big.children[0];    Console.log (pic); //two effects appear on the mouse move to the pictureSmall.onmouseover=function() {Mask.style.display= "Block"; Big.style.display= "Block"; } small.onmouseout=function() {Mask.style.display= "None"; Big.style.display= "None"    }        //set the focus frame of the small graph, follow the mouse;Small.onmousemove=function(e) {varMarginl=Box.offsetleft; varMargint=Box.offsettop; varcurrentx=E.clientx; varcurrenty=E.clienty; varX=CURRENTX-MARGINL-MASK.OFFSETWIDTH/2;varY=CURRENTY-MARGINT-MASK.OFFSETHEIGHT/2;//set the move area for the focus frame        if(x<0) {x=0;} if(X>small.offsetwidth-mask.offsetwidth) {x=small.offsetwidth-Mask.offsetwidth}; if(y<0) {y=0;} if(Y>small.offsetheight-mask.offsetheight) {y=small.offsetheight-Mask.offsetheight}; Mask.style.left=x+ "px"; Mask.style.top=y+ "px"; //set what is displayed in a large box        varrelativex=Mask.offsetleft; varrelativey=Mask.offsettop; varProporationx=pic.offsetwidth/small.offsetwidth;varProporationy=pic.offsetheight/small.offsetwidth; pic.style.marginleft=-relativex*proporationx+ "px"; Pic.style.marginTop=-relativey*proporationy+ "px"; }</script>

　　

Use JS to do a simple electronic product Magnifier function