js to achieve a simple magnifying glass effect
|
This article shares the specific code of js to achieve a simple magnifying glass effect for your reference. The specific content is as follows EffectEffect: When the mouse moves in the original image, the yellow box follows the mouse, and the part covered by the yellow box is displayed in the display area. The effect diagram is as follows:
Core idea1. When the mouse is placed on the picture, the display area appears. When the mouse leaves the small box, the display area disappears. 2. When the mouse moves on the picture, the small box moves with the mouse, and the mouse is in the middle of the yellow small box 3. The small box is judged so that it cannot exceed the image area 4. The display area should move the same distance as the small box moves on the image. 5. When the size of the display area changes, or the content of the display area increases or decreases, the yellow box on the original picture changes accordingly. operate1. Get the elements you need first
// Get the elements we need on the page var box1 = document.querySelector ('.box1')
var yellow = document.querySelector('.yellow')
var box2 = document.querySelector('#rightbox')
var screen = rightbox.children[0]2. When you move the mouse to the image, the display area will appear, and when you move away from it, it will disappear.
// The mouse enters and leaves the picture box1.onmouseenter=function(){
box2.style.display='block'
}
box1.onmouseleave=function(){
box2.style.display='none'
}This can be done by using the mouse enter and leave events, just set them to appear and not appear respectively 3. Move the mouse, the small box moves with it, and the mouse is in the middle of the yellow small box
box1.onmousemove=function(e){
// Calculate the center point of the small box when it is in the picture var x = e.pageX-box1.offsetLeft-yellow.offsetWidth/2
var y = e.pageY - box1.offsetTop - yellow.offsetHeight / 2
// Assign a value to the yellow box so that it moves with the mouse yellow.style.left=x+'px'
yellow.style.top=y+'px'
}1. Use events, and trigger each time the mouse is on the picture, so that it can be refreshed at any time 2. Calculate the center point of the small box in the picture Formula: (use the position of the mouse on the page, minus, the offset distance of the image, minus half of itself) Subtracting half here ensures that the mouse always stays centered in the yellow box. 4. The small box gives the judgment condition, so that the yellow small box cannot exceed the image area
//Move the mouse over the image to trigger the event box1.onmousemove=function(e){
// Calculate the center point of the small box in the picture var x = e.pageX-box1.offsetLeft-yellow.offsetWidth/2
var y = e.pageY - box1.offsetTop - yellow.offsetHeight / 2
// --------------------------------------------------------------------------------
// New part // Determine whether the small box exceeds the img range, so that the yellow small box cannot exceed the img range if (x < 0) {
// At this time, 0 is not the left side of the picture, but when the small box is at the far left, the center point of the small box x=0
}else if(x>box1.offsetWidth-yellow.offsetWidth){
// When the X-axis center point of the small box is greater than the width of the image box minus its own width, it means it exceeds the limit. It is always equal to the width of the image box minus its own width x=box1.offsetWidth-yellow.offsetWidth
}
// Same as above if(y<0){
y=0
}else if(y>box1.offsetHeight-yellow.offsetHeight){
y=box1.offsetHeight-yellow.offsetHeight
}
// ---------------------------------------------------------------------------------
// Assign a value to the yellow box so that it moves with the mouse yellow.style.left=x+'px'
yellow.style.top=y+'px'1. Determine whether the left side of the small box exceeds the image. The 0 given in if (x<0) is still calculated based on the center point. 2. Determine the right side x>box1.offsetWidth-yellow.offsetWidth (Is it greater than the image area width minus the small box width) Why is it the width of the small box? It is determined by the center point of the small box, and the position of 0 is the center point of the small box. Half of the small box has been subtracted, so what is subtracted on the right is half of the small box*2 3. The same applies to the top and bottom. This time the yellow box will not exceed the image area. 5. The display area should move the same distance as the small box moves on the image //Through calculation, we can get the ratio of how much the small box moves in the picture to how much the display area moves srceen.style.left=-x/box1.offsetWidth*srceen.offsetWidth+'px' srceen.style.top=-y/box1.offsetHeight*srceen.offsetHeight+'px' How much the display area moves depends on how much the small box moves The value of the small box movement divided by the width of the image multiplied by the width of the display area The movement value of the display area can be the same as the movement ratio of the small box in the picture. 6. The size of the display area changes or the content of the display area changes, and the yellow box on the picture changes accordingly
// Calculate the size of the yellow box on the picture yellow.style.width=box1.offsetWidth/(srceen.offsetWidth/box2.offsetWidth)+'px'
yellow.style.height=box1.offsetHeight/(srceen.offsetHeight/box2.offsetHeight)+'px'
}The calculation method is: the width of the yellow box = the width of the image / (the content width of the display area / the width of the frame of the display area) The height is the same Because it is triggered by mouse movement, it refreshes in real time Adjustment
.img2{
width: 3000px;
height: 3000px;
position: absolute;
}
#rightbox{
position: absolute;
top: 0;
left: 650px;
width: 900px;
height: 900px;
overflow: hidden;
display: none;
}When you need to adjust the size of the box or enlarge the ratio, just change the width and height of these two styles. Content, css, js overall code
<!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>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.img1{
width: 300px;
height: 300px;
}
.img2{
width: 3000px;
height: 3000px;
position: absolute;
}
#rightbox{
position: absolute;
top: 0;
left: 650px;
width: 900px;
height: 900px;
overflow: hidden;
display: none;
}
.yellow{
background-color: yellow;
opacity: 0.5;
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
}
.box1{
width: 300px;
height: 300px;
position: relative;
margin-left: 300px;
}
</style>
</head>
<body>
<div class="box1">
<img src="./images/1.jpg" alt="" class="img1">
<div class="yellow"></div>
</div>
<div id="rightbox">
<img src="./images/1.jpg" alt="" class="img2">
</div>
<script>
// Get the elements we need on the page var box1 = document.querySelector ('.box1')
var yellow = document.querySelector('.yellow')
var box2 = document.querySelector('#rightbox')
var source = rightbox.children[0]
// The mouse enters and leaves the picture box1.onmouseenter=function(){
box2.style.display='block'
}
box1.onmouseleave=function(){
box2.style.display='none'
}
//Move the mouse over the image to trigger the event box1.onmousemove=function(e){
// Calculate the center point of the small box in the picture var x = e.pageX-box1.offsetLeft-yellow.offsetWidth/2
var y = e.pageY - box1.offsetTop - yellow.offsetHeight / 2
// Check if the small box exceeds the img range, so that the yellow box cannot exceed the img range if (x < 0) {
// At this time, 0 is not the left side of the picture, but when the small box is at the far left, the center point of the small box x=0
}else if(x>box1.offsetWidth-yellow.offsetWidth){
// When the X-axis center point of the small box is greater than the width of the image box minus its own width, it means it exceeds the limit. It is always equal to the width of the image box minus its own width x=box1.offsetWidth-yellow.offsetWidth
}
// Same as above if(y<0){
y=0
}else if(y>box1.offsetHeight-yellow.offsetHeight){
y=box1.offsetHeight-yellow.offsetHeight
}
// Assign a value to the yellow box so that it moves with the mouse yellow.style.left=x+'px'
yellow.style.top=y+'px'
//Through calculation, we can get the ratio of how much the small box moves in the picture to how much the display area moves srceen.style.left=-x/box1.offsetWidth*srceen.offsetWidth+'px'
srceen.style.top=-y/box1.offsetHeight*srceen.offsetHeight+'px'
// Calculate the size of the yellow box on the picture yellow.style.width=box1.offsetWidth/(srceen.offsetWidth/box2.offsetWidth)+'px'
yellow.style.height=box1.offsetHeight/(srceen.offsetHeight/box2.offsetHeight)+'px'
}
</script>
</body>
</html>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:
|
<<: Tomcat garbled characters in the console in IDEA and how to set IDEA encoding to UTF-8
>>: Implementation of Docker configuration modification of Alibaba Cloud image repository
Recommend
How to use CSS attribute selectors to splice HTML DNA
CSS attribute selectors are amazing. They can hel...
Example analysis of mysql stored procedures that trigger error conditions in stored procedures (SIGNAL and RESIGNAL statements)
This article uses examples to illustrate the erro...
Guide to using env in vue cli
Table of contents Preface Introduction-Official E...
The role and methods of information communication in website visual design (picture and text)
Contemporary web visual design has gone through th...
A general method for implementing infinite text carousel with native CSS
Text carousels are very common in our daily life....
CSS form validation function implementation code
Rendering principle In the form element, there is...
Summary of new usage of vi (vim) under Linux
I have used the vi editor for several years, but ...
The pitfalls encountered when learning Vue.js
Table of contents Class void pointing ES6 Arrow F...
How to rename the table in MySQL and what to pay attention to
Table of contents 1. Rename table method 2. Notes...
A simple method to deal with the tabBar at the bottom of WeChat applet blocking content
After configuring the tabBar in the WeChat applet...
How to query whether the mysql table is locked
Specific method: (Recommended tutorial: MySQL dat...
How MySQL supports billions of traffic
Table of contents 1 Master-slave read-write separ...
Docker container monitoring and log management implementation process analysis
When the scale of Docker deployment becomes large...
Detailed explanation of several ways to create objects and object methods in js
This article is the second article about objects ...
Alibaba Cloud Server Tomcat cannot be accessed
Table of contents 1. Introduction 2. Solution 2.1...