Simple JS native Magnifier code

<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Document</title>
<style type= "Text/css" >
#obj {float:left; width:200px; height:200px; position:relative;}

#obj img{width:200px; height:200px; display:block;}

#darg {width:100px; height:100px; background:yellow; position:absolute; left:0px; top:0px; opacity:0.4;
Cursor:move; Display:none;}

#rightShow {float:left; width:400px; height:400px; overflow:hidden; display:none;}

#rightShow img{width:800px; height:800px;}
</style>
<script type= "Text/javascript" >
Window.onload=function () {
var obj = document.getElementById (' obj ');
var leftimg = document.getElementById (' leftimg ');
var darg = document.getElementById (' Darg ');
var rightshow = document.getElementById (' rightshow ');
var rightimg = document.getElementById (' rightimg ');

Obj.onmousemove=function (e) {//the event that the mouse moves over obj

var e = e | |  window.event; Get time objects and do compatible processing

darg.style.display= ' block '; Icon display for analog Magnifier
rightshow.style.display= ' block '; The area of the Magnifier is displayed

var lefts = E.CLIENTX-OBJ.OFFSETLEFT-DARG.OFFSETWIDTH/2;
Move the mouse distance from the left side of the browser minus obj distance from the left side of the browser minus half the actual width of the magnifying glass icon (including edges, etc.)
That is, the left distance of the obj internal magnifying glass icon from the inner edge of obj
var tops = E.CLIENTY-OBJ.OFFSETTOP-DARG.OFFSETHEIGHT/2;
Move the mouse distance from the top of the browser minus the obj distance from the top of the browser minus half the actual height of the magnifying glass icon
is the top distance of the obj internal magnifying glass icon from the inner edge of obj
var Maxmovex = obj.clientwidth-darg.offsetwidth;
The visible width of obj (excluding edge scrollbars, etc.) when moving, minus the actual width of the Darg magnifier icon
That is, the remaining width of the magnifier minus the magnifying glass is the distance to move around.
var maxmovey = obj.clientheight-darg.offsetheight;
The visible height of obj minus the actual height of the Darg magnifier icon when moving
Move obj inside minus the remaining height of the magnifying glass, which is the distance you can move up or down

if (Lefts > Maxmovex) {//If the distance moved is more than the distance you can move, the distance can be moved to prevent the magnifying glass from spilling to the right of obj
Lefts = Maxmovex;
}

if (Tops > Maxmovey) {//If the distance moved is greater than the distance that can be moved up and down, the movable distance can be assigned to prevent the magnifying glass from spilling under obj
tops = Maxmovey;
}

if (Lefts < 0) {//If the left distance of the move is less than 0, assign 0 to the moving distance to prevent the magnifying glass from spilling to the left of obj
lefts = 0;
}

if (Tops < 0) {//if the upper distance of the move is less than 0, assign a value of 0 to the moving distance to prevent the magnifying glass from spilling over the upper side of obj
tops = 0;
}

Darg.style.left = lefts + ' px '; Assign the left and right distance of the mouse movement to the magnifying glass so that the magnifying glass moves
Darg.style.top = tops + ' px '; Assign the upper and lower distance of the mouse to the magnifying glass to let the magnifying glass follow the movement

var num = rightimg.offsetwidth/leftimg.offsetwidth;
Big picture divided by small picture get to zoom in multiples
Rightshow.scrollleft = Darg.offsetleft * NUM;
Multiply the distance from the left side of the magnifying glass by multiples and assign to the element that contains the large picture (object)
Then this element should have a distance to the left of the scrollleft value, but because the overflow is hidden, so the scroll bar does not show the hidden
rightshow.scrolltop = darg.offsettop * NUM;
Multiply the distance from the upper side of the magnifying glass by multiples and assign to the element (object) that contains the large picture.
Then this element should have a distance to the left of the scrolltop value, but because the overflow is hidden, so the scroll bar does not show the hidden
}

Obj.onmouseout=function () {

Darg.style.display= ' None ';
Rightshow.style.display= ' None ';
Hidden when the mouse overflows obj
}

};
</script>
<body>
<div id= "obj" >

<div id= "Darg" ></div>
</div>

<div id= "Rightshow" class= "All" ></div>
</body>

Simple JS native Magnifier code