JavaScript to achieve a simple magnifying glass effect
|
There is a picture in a big box. When you put the mouse on it, a semi-transparent mask layer will appear. When you move the mouse, the mask layer moves with it. There is also an enlarged picture next to the box. The position of the enlarged picture changes with the position of the mask layer. When the mouse leaves the big box, the mask layer and the enlarged picture disappear. Implementation ideas 1. Edit the box, mask layer, and enlarged image page in html and css, and set the mask layer and enlarged image to be hidden by default Note: The offset of the enlarged image is given a negative value, which is opposite to the direction of movement of the mask layer. Code Sample
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile phone details page</title>
<!-- <link rel="stylesheet" href="css/detail.css" >
<script src="js/detail.js"></script> -->
<style>
* {
margin: 0;
padding: 0;
}
.detail-content {
width: 1200px;
margin: 0 auto;
}
img {
border: 0;
vertical-align: middle;
}
.preview_img {
position: relative;
width: 400px;
height: 400px;
margin-top: 30px;
border: 1px solid #ccc;
}
.preview_img img {
width: 100%;
height: 100%;
}
.mask {
display: none;
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background-color: pink;
opacity: .5;
cursor: move;
}
.big {
display: none;
position: absolute;
top: 0;
left: 410px;
width: 500px;
height: 500px;
border: 1px solid #ccc;
background-color: pink;
z-index: 999;
overflow: hidden;
}
.bigimg {
position: absolute;
top: 0;
left: 0;
width: 800px;
height: 800px;
}
</style>
</head>
<body>
<div class="detail-content">
<div class="preview_img">
<img src="upload/s3.png" alt="">
<div class="mask"></div>
<div class="big">
<img src="upload/big.jpg" alt="" class="bigImg">
</div>
</div>
</div>
<script>
var previewImg = document.querySelector('.preview_img');
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
var bigImg = document.querySelector('.bigImg');
// Mouse over box event previewImg.addEventListener('mouseover', function() {
// Set the occlusion layer and magnified image display mask.style.display = 'block';
big.style.display = 'block';
})
// Mouse leaves the box event previewImg.addEventListener('mouseout', function() {
// Set the occlusion layer and the enlarged image to hide mask.style.display = 'none';
big.style.display = 'none';
})
// Mouse moves in the box previewImg.addEventListener('mousemove', function(e) {
// Get the position of the mouse in the box var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// Calculate the movement value of the occlusion layer and put the mouse in the middle of the occlusion layer var maskX = x - mask.offsetWidth / 2;
var maskY = y - mask.offsetHeight / 2;
// The box is a square, so only the maximum horizontal X-axis movement value is calculated. The maximum Y-axis movement value is consistent with the X-axis var maskMax = previewImg.offsetWidth - mask.offsetWidth;
// Limit the occlusion layer to move within the box if (maskX <= 0) {
maskX = 0;
} else if (maskX >= maskMax) {
maskX = maskMax;
}
if (maskY <= 0) {
maskY = 0;
} else if (maskY >= maskMax) {
maskY = maskMax;
}
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
// Calculate the maximum movement value of the enlarged image, the horizontal movement value of the large image = the movement value of the occlusion layer * the maximum movement distance of the large image / the maximum movement distance of the occlusion layer var bigMax = bigImg.offsetWidth - big.offsetWidth;
var bigX = maskX * bigMax / maskMax;
var bigY = maskY * bigMax / maskMax;
bigImg.style.left = -bigX + 'px';
bigImg.style.top = -bigY + 'px';
})
</script>
</body>
</html>Page effect:
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Analysis of MySql index usage strategy
>>: Docker container orchestration implementation process analysis
Recommend
CSS3 creates web animation to achieve bouncing ball effect
Basic preparation For this implementation, we nee...
CSS simulates float to achieve the effect of center text surrounding the image on the left and right
What is text wrapping around images? This is the ...
Beginners learn some HTML tags (1)
Beginners can learn HTML by understanding some HT...
A brief discussion on the correct posture of Tomcat memory configuration
1. Background Although I have read many blogs or ...
Design theory: the basics of font design
<br />Words are the inevitable product of hu...
You Probably Don’t Need to Use Switch Statements in JavaScript
Table of contents No switch, no complex code bloc...
React High-Order Component HOC Usage Summary
One sentence to introduce HOC What is a higher-or...
Creating Responsive Emails with Vue.js and MJML
MJML is a modern email tool that enables develope...
HTML tags: sub tag and sup tag
Today I will introduce two HTML tags that I don’t...
How to enable MySQL remote connection
For security reasons, MySql-Server only allows th...
Implementing a web player with JavaScript
Today I will share with you how to write a player...
Summary of several important performance index calculation and optimization methods for MySQL
1 QPS calculation (number of queries per second) ...
mysql installer community 8.0.12.0 installation graphic tutorial
This tutorial shares the installation of mysql in...
Detailed explanation of how to automatically add prefix plugin after CSS3 packaging: autoprefixer
The project scaffolding built with vue-cli has al...
MySQL database advanced query and multi-table query
MySQL multi-table query Add a worksheet -- User t...