Implement the picture magnifier effect with native js code

Today, I would like to share with you a picture zoom effect written by myself using JavaScript. I have made two types of zoom effects, and in fact, their principles are quite similar. Both use two images, set the corresponding sizes for the two images, and finally display them at different positions to achieve the magnification effect.

The first one is a magnifying glass effect imitated from Taobao shopping pages. When the mouse moves over the product image, a rectangular area appears on the image, which is the area you want to enlarge. Then, an enlarged product image appears on the right side of the product image. This type of magnification only requires you to calculate the magnification ratio and then modify the scrollLeft and scrollTop values of the magnification area to achieve the corresponding magnification effect.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Image Zoom</title>
<style media="screen">
*{
margin: 0;
padding: 0;
}
/* Parent tag of the visible area */
.wrap{
width: 400px;
height:auto;
border: 1px solid black;
display: inline-block;
position: absolute;
left: 0;
top: 0;
}
.wrap>img{
width: 100%;
height: auto;
}
/* Lock the enlarged rectangular area */
.box{
border: 1px solid black;
width: 100px;
height: 100px;
background: rgba(0, 0, 0, 0.5);
opacity: 0.8;
position: absolute;
cursor: pointer;
display: none;
}
/* To display the parent of the enlarged image */
.main{
width: 700px;
height: 700px;
margin;-left:; 420px;
overflow: hidden;
display:none;
position: absolute;
top: 0;
}
.main>img{
width:2800px;
height:auto;
}
</style>
</head>
<body>
<div class="wrap">
<img src="dog.jpg" alt="" />
<div class="box"></div>
</div>
<div class="main">
<img src="dog.jpg"alt="" />
</div>
<script type="text/javascript">
//Get four objects
var wrap=document.querySelector('.wrap');
var box=document.querySelector('.box');
var main=document.querySelector('.main');
var mainImg=document.querySelector('.main img');
//Add mousemove event
wrap.onmousemove=function(){
//A locked zooming area and zoomed image appear after the mouse is moved over the visible image
box.style.display='block';
main.style.display='block';
var event=window.event || event;
//Get the offset of the mouse from the edge of the visible area
var disx=event.clientX-box.offsetWidth/2;
var disy=event.clientY-box.offsetHeight/2;
//The maximum movable range of the rectangular area
var distanceMaxX=wrap.offsetWidth-box.offsetWidth;
var distanceMaxY=wrap.offsetHeight-box.offsetHeight;
// Determine whether the locked zooming rectangle area cannot be out of the frame
if (disx<=0) {
disx=0;
}
if (disy<=0) {
disy=0;
}
if(disx>=distanceMaxX) {
disx=distanceMaxX;
}
if(disy>=distanceMaxY) {
disy=distanceMaxY;
}
box.style.left=disx+'px';
box.style.top=disy+'px';
//Get the zoom ratio
var scalex=box.offsetLeft/distanceMaxX;
var scaley=box.offsetTop/distanceMaxY;
main.scrollLeft=(mainImg.clientWidth-main.clientWidth)*scalex;
main.scrollTop=(mainImg.clientHeight-main.clientHeight)*scaley;
}
//Add mouseout event
wrap.onmouseout=function(){
box.style.display='none';
main.style.display='none';
}
</script>
</body>
</html>

Preview of Effects:

The second method is to zoom in directly on the original image, like a magnifying glass on top of it, which is an extension of the first method. There is no difference in the previous methods, except that it does not need to place a visible area for it, and the zoomed image is displayed directly in the area where you originally set the zoom, without the need to place a visible area, and the image's left and top values are automatically adjusted when you modify the left and top values of the zoom area, achieving a synchronized zoom effect

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Magnifying Glass</title>
<style type="text/css">
.main{
width: 500px;
height: 570px;
border: 2px solid black;
position: relative;
/*overflow: hidden;*/
}
#img1{
width: 100%;
height: 100%;
}
.box{
width: 200px;
height: 200px;
border-radius: 200px;
/*border: 1px solid black;*/
display: none;
position: absolute;
overflow: hidden;
cursor:move;
}
//Enlarge the image Give absolute positioning so that it can move with the movement
Implement synchronization with the locked area
#img2{
width: 1200px;
height: 1400px;
position: absolute;
/*left: 0;
top: 0;*/
/*display: none;*/
}
</style>
</head>
<body>
<div class="main">
<img id="img1" src="dog.jpg"/>
<div class="box">
<img id="img2" src="dog.jpg"/>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var main=document.querySelector('.main');
var box=document.querySelector('.box');
var boximg=document.querySelector('#img2
//Add mouse move event
main.addEventListener('mousemove',move,false);
function move(){
//Display the enlarged circular area
box.style.display='block';
var event=window.event||event;
//Get the offset of the mouse from the edge of the visible area
var disx=event.clientX-box.offsetWidth/2;
var disy=event.clientY-box.offsetHeight/2;
var dismax=main.offsetWidth-box.offsetWidth;
var dismay=main.offsetHeight-box.offsetHeight;
//The maximum movable range of the rectangular area
if (disx<=0) {
disx=0;
}
if (disx>=dismax) {
disx=dismax-2;
}
if(disy<=0){
disy=0;
}
if(disy>=dismay){
disy=dismay-2;
}
//When you move, modify the left and top values of the circular area.
box.style.left=disx+'px';
box.style.top=disy+'px';
// var scalx=main.offsetWidth/box.offsetWidth
// var scaly=main.offsetHeight/box.offsetHeight;
//Similarly, when you move, the image to be zoomed also needs to modify the left and top values.
boximg.style.left=-event.clientX*2+'px';
boximg.style.top=-event.clientY*2+'px';
// box.scrollLeft=(boximg.offsetWidth-box.offsetWidth);
// box.scrollTop=(boximg.offsetHeight-box.offsetHeight);
}
// Add mouseout event
main.addEventListener('mouseout',out,false);
function out(){
box.style.display='none';
}
</script>

Preview of Effects:

Conclusion: As everyone has seen, there is actually no difference between the two zooming methods. First, you need to get the area to be zoomed, which is the rectangle and circle mentioned earlier. Then, display the area of the image to be zoomed. I hope these two pieces of code will be helpful to everyone. Thank you!!!

Basic Tutorial