For example:
Let IMGs = {
Small: ["imga_1.jpg", "imgb_1.jpg", "imgc_1.jpg"],
Middle: ["imga_2.jpg", "imgb_2.jpg", "imgc_2.jpg"],
Large: ["imga_3.jpg", "imgb_3.jpg", "imgc_3.jpg"]
};
Handlesmall ();
Handlemiddle ();
Handlemove ();
function Handlesmall () {
Rendering a small image
smallimg.innerhtml = Imgs.small.map (item, index) = = {
Return ' <li><a href= ' # "></a></ Li> '
}). Join ("");
Smallimg.addeventlistener ("MouseOver", (e) + = {
if (e.target.nodename = = = = "IMG") {
Let Imgarr = Document.getelementsbyclassname ("Imgli");
for (Let i = 0;i < imgarr.length;i++) {
Imgarr[i].style.bordercolor = "Transparent";
}
E.target.style.bordercolor = "BLACK";
Let i = E.target.getattribute ("_id");
middleImg.style.background = ' url ("./images/${imgs.middle[i]}") No-repeat ';
largeImg.style.background = ' url ("./images/${imgs.large[i]}") No-repeat ';
}
}, False);
}
function Handlemiddle () {
Middleimg.addeventlistener ("MouseOver", () = {
LargeImg.style.display = "block";
Enlarge.style.display = "block";
}, False)
Middleimg.addeventlistener ("Mouseout", () = {
LargeImg.style.display = "None";
Enlarge.style.display = "None";
}, False)
}
function Handlemove () {
Middleimg.addeventlistener ("MouseMove", (e) + = {
The coordinates of the mouse relative to the document display area
Let MouseX = E.clientx;
Let Mousey = E.clienty;
MIDDLEIMG coordinates relative to the document display area
Let Middlex = Middleimg.offsetleft;
Let Middley = Middleimg.offsettop;
Let MoveX = MOUSEX-MIDDLEX-ENLARGE.OFFSETWIDTH/2;
Let Movey =MOUSEY-MIDDLEY-ENLARGE.OFFSETHEIGHT/2;
if (MoveX <= 0) {
MoveX = 0;
}else if (MoveX >= middleimg.clientwidth-enlarge.offsetwidth) {
MoveX = Middleimg.clientwidth-enlarge.offsetwidth
}
if (Movey <= 0) {
Movey = 0;
}else if (Movey >= middleimg.clientheight-enlarge.offsetheight) {
Movey = Middleimg.clientheight-enlarge.offsetheight
}
Enlarge.style.left = MoveX + "px";
Enlarge.style.top = Movey + "px";
LargeImg.style.backgroundPositionX =-movex * (800/430) + "px";
LargeImg.style.backgroundPositionY =-movey * (800/430) + "px";
}, False)
}
How to use the magnifying glass JS