js to achieve simple magnifying glass effects

This article example shares the specific code of js to achieve a simple magnifying glass effect for your reference. The specific content is as follows

Let’s take a look at the effect first:

Before writing about the magnifying glass, let’s first understand the positioning:

Usually the child is absolutely relative to the parent (the parent element is relatively positioned, and the child element is absolutely positioned)

How elements are positioned:

1. Static positioning, the default state of all elements without adding any positioning method

2. Relative positioning, without leaving the document flow, can be relative to its original position, displacement

3. Fixed positioning, completely out of the document flow, moves relative to the blank area of the browser, and will not scroll due to the scrolling of the browser

4. Absolute positioning is completely separated from the document flow and positioned relative to the N-level element above. If the parent element has no relative, absolute or fixed positioning method, the absolutely positioned element will search to the upper level.

We first locate the box and the magnifying box and then hide the magnifying box

.box {
 width: 450px;
 height: 450px;
 margin: 100px 0 0 100px;
 border: 1px solid red;
 position: relative;
 }

 /* Big box on the right */
 .bigBox{
 width: 540px;
 height: 540px;
 position: absolute;
 top: 100px;
 left: 560px;
 border: 1px solid #ccc;
 overflow: hidden;
 display: none;
 }
 .bigBox img {
 position: absolute;
 left: 0;
 top: 0;
 }


 /* Overlay */
 .box .mask{
 width: 260px;
 height: 260px;
 background-color: yellow;
 /*Adjust transparency*/
 opacity: .4;
 position: absolute;
 left: 0;
 top: 0;
 /*Disappear by default*/
 display: none;
 }

When writing js, we should pay attention to:

When the page is loaded, bind the mouse enter and move out events to the box

<script>
 
 window.onload = function (){
 var box = document.querySelector(".box");
 var mask = document.querySelector(".mask");
 var bigBox = document.querySelector(".bigBox");
 var bigImg = document.querySelector(".bigBox > img");
 console.log(bigImg);
 
 //Mouse moves into box.onmouseover = function (){
 document.querySelector(".mask").style.display = "block";
 document.querySelector(".bigBox").style.display = "block";
 }
 // Move out of box.onmouseout = function (){
 document.querySelector(".mask").style.display = "none";
 document.querySelector(".bigBox").style.display = "none";
 }

 // Let the overlay follow the mouse movement box.onmousemove = function (){
 // Because the box has a 100-pixel margin, we need to subtract it, otherwise it will be misaligned var left = event.pageX - 100 - 130;
 var top = event.pageY - 100 - 130;
 // The covering object cannot exceed the range of the box, so it is necessary to determine the range of coordinate values. // Get the maximum distance that the covering object can move in the box var maskMax = this.offsetWidth - mask.offsetWidth;
 //Judge left
 if(left <= 0){
 left = 0;
 }else if(left >= maskMax){
 left = maskMax;
 }

 // top
 if(top <= 0){
 top = 0;
 }else if(top >= maskMax){
 top = maskMax;
 }

 // Set the set left and top values to the style mask.style.left = left + "px";
 mask.style.top = top + "px";
 mask.style.cursor = "move";

Notice:

① According to the proportion of movement, set the moving coordinates of the big picture ② The moving coordinates of the big picture = the offset of the cover * the maximum movable distance of the big picture / the maximum movable distance of the cover ③ ? = offset * (width of the picture - width of bigBox) / maskMax

// Maximum displacement distance of the big image in the big box var bigImgMax = bigImg.offsetWidth - bigBox.offsetWidth;
// Left value of the big picture var bigImgX = mask.offsetLeft * bigImgMax / maskMax;
// Top value of the big image var bigImgY = mask.offsetTop * bigImgMax / maskMax;
 // The moving direction of the overlay is opposite to that of the large image, so a negative value should be given here bigImg.style.left = -bigImgX + "px";
 bigImg.style.top = -bigImgY + "px";

 }
 }

mark is a magnifying glass (yellow part)

<div class="box">
 <img src="../img/small.jpg" alt="">
<div class="mask">
</div>
<div class="bigBox">
 <img src="../img/big.jpg" alt="">
</div>

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:

JavaScript realizes magnifying glass special effects
JavaScript imitates Jingdong magnifying glass special effects
Realizing magnifying glass effects based on javascript
JS realizes the magnifying glass effect of e-commerce product display
Magnifying glass special effects example implemented by native JS [test available]
js to achieve magnifying glass effects
Native js simple implementation of magnifying glass effects
Implementation process of the magnifying glass effect in the Javascript example project

<<: mysql query data from one table and insert it into another table implementation method

>>: CentOS 7 set grub password and single user login example code