Native JS Implementation Magnifier effect

The Magnifier effect mainly involves 3 mouse events:

1.onmouseover, the mouse moves into the floating small square and displays the enlarged area display;

2.onmousemove, move the mouse, the small square and the magnified area together;

3.onmouseout, the mouse to remove the small box and enlarge the area disappears.

In fact, the most important effect of the magnifying glass is the ratio and position of the small square and the magnified area:

<div id= "Small_box" ><div class= "small_pic" ><div id= "Float_box" ></div></div></div><div id= "Big_box" ><div class= "big_pic" ></div></div>

*{padding:0;margin:0;} Img{border:none;} #small_box {width:350px;height:175px;border:1px solid #666; overflow:hidden;position:relative;top:200px;left:100px ;d Isplay:inline-block;}. Small_pic img{width:350px;height:175px;} #big_box {width:350px;height:175px;border:1px solid #666;p Osition:absolute;top:200px;left:500px;overflow:hidden; Display:none;}. Big_pic Img{width:1400px;height:700px;position:absolute;} #float_box {width:100px;height:50px;background-color: #000; Opacity:0.5;position:absolute    ; display:none;cursor:move;z-index:99;}

JS Code:

Window.onload=function () {/* gets page element */var Small_box=document.getelementbyid (' Small_box '); var float_box= document.getElementById (' Float_box '); var Big_box=document.getelementbyid (' Big_box '); var big_box_img=big_        Box.getelementsbytagname (' img ') [0]; /* Mouse move in, zoom in and out area display */small_box.onmouseover=function (e) {float_box.style.display= ' block '; big_box.style.display= ' Block ';} /* Trigger */small_box.onmousemove=function when mouse moves (e) {e=e| |  window.event;  E.clientx is the horizontal coordinate var float_box_left=e.clientx-small_box.offsetleft-50 that is triggered when the mouse pointer is to the browser page; Find the mouse in the center of the floating layer var Float_box_top=e.clienty-small_box.offsettop-25;var left=float_box.offsetleft*big_box_ img.offsetwidth/small_box.offsetwidth;//x2 value, i.e. the left margin of the picture offset box var top=float_box.offsettop*big_box_img.offsetheight/ small_box.offsetheight;//The X2 value, that is, the height of the picture offset box big_box_img.style.left=-left+ ' px '; big_box_img.style.top=-top+ ' px '; /* Control floating layer cannot exceed box range */if (float_box_left<0) {float_box.style.left=0;} else if (float_box_left> (small_box.offsetwidth-100)) {Float_box.style.left=small_box.offsetwidth-100+ ' px ';} else{float_box.style.left=float_box_left+ ' px ';} if (float_box_top<0) {float_box.style.top=0;} else if (float_box_top> (small_box.offsetheight-50)) {float_box.style.top=small_box.offsetheight-50+ ' px ';} else{float_box.style.top=float_box_top+ ' px ';}} /* Trigger */small_box.onmouseout=function () {float_box.style.display= ' none ' when mouse moves out; big_box.style.display= ' None ';}}

The effect is realized, but due to the divisor of the decimal point deviation, the effect may also have a little deviation, roughly this. The most important thing is to realize the thinking logic in effect.

Recommended website: HTTP://WWW.IMOOC.COM/LEARN/32, magnifying glass teaching video.

Native JS Implementation Magnifier effect