<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<Title> Magnifier </ title>
<style>
*{
margin: 0;
padding: 0;
}
/ * Remove the picture 3px * /
img {
vertical-align: top;
}
/ * Style container * /
.container {
width: 350px;
height: 350px;
margin:100px;
border: 1px solid #ccc;
position: relative;
}
/ * Mouse style box * /
.mouse {
position: relative;
}
/ * Big mouse style box * /
.mouseBigSize {
width: 450px;
height: 450px;
position: absolute;
top: 0;
left: 370px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
/ * Big mouse inside the box Picture Styles * /
.mouseBigSize img {
position: absolute;
top: 0;
left: 0;
}
/ * Mask layer pattern * /
.mask {
width: 100px;
height: 100px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0;
left: 0;
cursor: move;
display: none;
}
</style>
</head>
<body>
<div class="container">
<! - small mouse ->
<div class="mouse">
<img src="./images/mouse.jpg" alt="">
<! - mask layer ->
<div class="mask"></div>
</div>
<-! Big Mouse ->
<div class="mouseBigSize">
<img src="./images/mouseBigSize.jpg" alt="">
</div>
</div>
<script>
// Get the DOM element
let container = document.getElementsByClassName ( "container") [0]; // maximum box
let mouse = document.getElementsByClassName ( "mouse") [0]; // Get the mouse small box
let mouseBigSize = document.getElementsByClassName ( "mouseBigSize") [0]; // Get the mouse large box
let bigImg = mouseBigSize.children [0]; // to obtain a large image inside the box
let mask = document.getElementsByClassName ( "mask") [0]; // Get the mask layer
// small box to add the mouseover event
mouse.onmouseover = function(){
mask.style.display = "block";
mouseBigSize.style.display = "block";
}
// add to the small box mouseout event
mouse.onmouseout = function(){
mask.style.display = "none";
mouseBigSize.style.display = "none";
}
// initialize x and y axes
let x = 0,y = 0;
// add to the small box mousemove event
mouse.onmousemove = function(event){
x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth / 2;
y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight / 2;
// boundary judgment
if(x < 0)
{
x = 0;
}
if(x > mouse.offsetWidth - mask.offsetWidth)
{
x = mouse.offsetWidth - mask.offsetWidth;
}
if(y < 0)
{
y = 0;
}
if(y > mouse.offsetHeight - mask.offsetHeight)
{
y = mouse.offsetHeight - mask.offsetHeight;
}
left and top // re-assigned to the mask layer
mask.style.left = x + "px";
mask.style.top = y + "px";
/*
Calculation: meal to eat two steamed bread brother, brother eat a meal 4 bread, and asked: brother today eat three buns, brother should eat some bread?
They calculated a multiple of 4/22-fold
== 3 * 2 6
*/
/*
FIG box large / small box = multiple of FIG.
We then position the distance traveled by a small map * == multiples of the big picture
*/
bigImg.style.left = -x * mouseBigSize.offsetWidth / mouse.offsetWidth + "px";
bigImg.style.top = -y * mouseBigSize.offsetHeight / mouse.offsetHeight + "px";
}
</script>
</body>
</html>