#
;

;

; #


<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;
##

The above is the detailed content of Example code for implementing magnifying glass effect using js. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Examples of judging equality and inequality in JavascriptNext article：Examples of judging equality and inequality in Javascript

Related articles

See more