Example code for implementing magnifying glass effect using js

;

;

;

<script><br> function bigimg(){<br> var bbox = document.getElementById("box");<br> var bmove = document.getElementById("move");<br> var bbimg = document.getElementById("bimg");<br> var b_bimg = document. getElementById("b_bimg");<br> bbox.onmouseover = function(){//Move the mouse to the box to display the large picture and selection box<br>bbimg.style.display = "block";<br>bmove.style .display="block";<br> }<br> bbox.onmouseout = function(){//The large picture and selection box will not be displayed when the mouse moves away from the box<br>bbimg.style.display = "none";<br>bmove.style.display="none";<br> }<br> bbox.onmousemove = function(e){//Get the mouse position<br>var x = e.clientX;//Mouse relative to the viewport Position<br>var y = e.clientY;<br>var t = bbox.offsetTop;//The position of the box relative to the viewport<br>var l = bbox.offsetLeft;<br>var _left = x - l - bmove.offsetWidth/2;//Calculate the position of move<br>var _top = y - t -bmove.offsetHeight/2;<br>if(_top<=0)//Slide to the top of the box<br/> _top = 0;<br/>else if(_top>=bbox.offsetHeight-bmove.offsetHeight)//Slide to the bottom of the box<br> _top = bbox.offsetHeight-bmove.offsetHeight ;<br>if(_left<=0 )//Slide to the far left of the box<br/> _left=0;<br/>else if(_left>=bbox.offsetWidth-bmove.offsetWidth)//Slide to the far right of the box<br> _left=bbox.offsetWidth- bmove.offsetWidth ;<br>bmove.style.top = _top +"px";//Set the position of move<br>bmove.style.left = _left + "px";<br>var w = _left/(bbox .offsetWidth-bmove.offsetWidth);//Calculate the proportion of movement<br>var h = _top/(bbox.offsetHeight-bmove.offsetHeight);<br>var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h; //Calculate the position of the large image<br>var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w;<br>b_bimg.style.top = -b_bimg_top + "px";//Set the position information of the large image<br>b_bimg.style.left = -b_bimg_left + "px";<br> }<br><br> }<br> </script>

Black arrow:

Red arrow:

##1 2

var x = e.clientX;//The position of the mouse relative to the viewport var y = e.clientY;

##1 2

var t = bbox.offsetTop;//The position of the box relative to the viewport var l = bbox.offsetLeft;

# # Orange Arrow:

1

2	var _left = x - l - bmove.offsetWidth/2;//Calculate the position of move var _top = y - t -bmove.offsetHeight/2;

2. Calculation of bimg block

Use the proportion of the move block within the movable range to set the position of the large image

Movement range of the move block:

1

##bbox.offsetWidth-bmove.offsetWidth

The current coordinates of the move block account for the proportion of the movable range:

##12var##bimg’s movement range:

w = _left/(bbox.offsetWidth-bmove.offsetWidth); //Calculate the proportion of movementvar h = _top/(bbox.offsetHeight-bmove.offsetHeight);

##1

b_bimg.offsetHeight- bbimg.offsetHeight

##bimg position:

1

2//Calculate the position of the big picture

##var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;

var b_bimg_left = (b_bimg .offsetWidth-bbimg.offsetWidth)*w; ##