JavaScript to achieve a simple magnifying glass effect

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
2. Get the element object, bind the mouse event mouseover to the big box, set the mask layer and enlarged image display when the mouse passes over: set display to 'block'
Mouse out - - -mouseout, set the mask layer and magnified image display when the mouse passes over: display is set to 'none'
3. Calculate the position of the mouse in the big box
4. Place the mouse in the middle of the mask layer: Move the mask layer half the distance upward and left relative to the mouse position. Position the mask layer - - - Absolutely position it, assigning an upward and left offset relative to the box.
5. Limit the movement of the mask layer in the big box - - - Determine the value of the offset. When <= 0, the offset is 0
6. The position of the enlarged image changes as the mask layer moves. Mask layer movement value / mask layer maximum movement distance = enlarged image movement distance / enlarged image maximum movement distance. According to this relationship, the movement distance of the enlarged image is obtained. The movement distance is assigned to the offset top and left of the enlarged image.

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:
  • JS version of the picture magnifying glass effect
  • js to achieve a simple magnifying glass effect
  • js realizes the magnifying glass function of shopping website
  • js to achieve simple magnifying glass effects
  • js magnifying glass magnifying picture effect
  • A simple example of using js to achieve the effect of a magnifying glass
  • JavaScript image magnifying glass effect code [the code is relatively simple]
  • A magical Javascript image magnifier
  • JavaScript image magnifier (drag and drop, zoom effect)
  • Magnifying glass effect written in native js

<<:  Analysis of MySql index usage strategy

>>:  Docker container orchestration implementation process analysis

Recommend

In-depth analysis of the Identifier Case Sensitivity problem in MySQL

In MySQL, you may encounter the problem of case s...

Native js implements shopping cart logic and functions

This article example shares the specific code of ...

The idea and process of Vue to realize the function of remembering account and password

Table of contents Implementation ideas There are ...

Example code for implementing bottom alignment in multiple ways with CSS

Due to the company's business requirements, t...

Detailed explanation of CSS child element fixed positioning solution relative to parent element

Basic Concepts Absolute positioning: An element b...

JS implementation of carousel example

This article shares the specific code of JS to im...

About the usage and precautions of promise in javascript (recommended)

1. Promise description Promise is a standard buil...

Detailed explanation of several ways to create a top-left triangle in CSS

Today we will introduce several ways to use CSS t...

Transplanting the mkfs.vfat command in busybox under Linux system

In order to extend the disk life for storing audi...

Methods to enhance access control security in Linux kernel

background Some time ago, our project team was he...

Detailed explanation of the underlying principle of defineCustomElement added in vue3.2

Table of contents Web Components customElements O...

Detailed explanation of the difference between tags and elements in HTML

I believe that many friends who are new to web pag...

Using js to implement simple switch light code

Body part: <button>Turn on/off light</bu...

Native js to achieve simple carousel effect

This article shares the specific code of js to ac...

Introduction to the usage of exists and except in SQL Server

Table of contents 1. exists 1.1 Description 1.2 E...