Home > Article > Web Front-end > Using JavaScript to implement the image magnifying glass function

Using JavaScript to implement the image magnifying glass function

王林Original: 2023-08-09 20:01:042145browse

Use JavaScript to implement the picture magnifying glass function

In web design, the picture magnifying glass function is a common and practical function, which allows users to hover the mouse over the picture. When uploading, local details are enlarged to enhance user experience. In this article, we will use JavaScript to implement a simple image magnifier function.

First, we need to prepare a picture to be used. Suppose we have an image called "image.jpg" and we will use it to implement the magnifying glass function. At the same time, we also need a piece of HTML code to display pictures and magnifying glass effects.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片放大镜</title>
    <style>
        .container {
            position: relative;
            width: 500px;
            height: 400px;
        }
        .image {
            width: 100%;
        }
        .zoom {
            position: absolute;
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="image.jpg" alt="图片" class="image">
        <div class="zoom"></div>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

In the above code, we create a container element , which contains a picture element and a magnifying glass element. The image element has a width and height of 100%, and the magnifying glass element has a width and height of 200px. At the same time, we set position: absolute for the magnifying glass element so that it can be positioned relative to the mouse hover position.

Next, we need to write JavaScript code to implement the image magnifying glass function. We will put this code in a file called "script.js".

window.addEventListener('DOMContentLoaded', function() {
    const container = document.querySelector('.container');
    const image = document.querySelector('.image');
    const zoom = document.querySelector('.zoom');
    
    container.addEventListener('mousemove', function(event) {
        // 获取鼠标相对于容器的位置
        const x = event.pageX - container.offsetLeft;
        const y = event.pageY - container.offsetTop;
        
        // 设置放大镜的位置为鼠标悬停位置的左上角
        zoom.style.left = (x - zoom.offsetWidth / 2) + 'px';
        zoom.style.top = (y - zoom.offsetHeight / 2) + 'px';
        
        // 设置放大镜的背景图片位置，使其与图片的缩放比例保持一致
        zoom.style.backgroundPosition = (-x * 2) + 'px ' + (-y * 2) + 'px';
    });
    
    container.addEventListener('mouseenter', function() {
        // 显示放大镜
        zoom.style.display = 'block';
    });
    
    container.addEventListener('mouseleave', function() {
        // 隐藏放大镜
        zoom.style.display = 'none';
    });
});

In the above code, we first obtain references to the container element, picture element and magnifying glass element. Then, we added a mousemove event listener to the container element, which is triggered when the mouse moves over the container element. In the event handler, we get the position of the mouse relative to the container element, and set the position of the magnifying glass element and the position of the background image based on this position. We also added mouseenter and mouseleave event listeners to the container element, which are triggered when the mouse enters and leaves the container element respectively to show and hide the magnifying glass element.

Finally, introduce this JavaScript code into our HTML file to complete the implementation of the picture magnifying glass.

To sum up, it is not complicated to use JavaScript to implement the picture magnifying glass function. You only need to listen to the mouse movement event and set the position of the magnifying glass and the position of the background image according to the mouse position. This feature is very helpful for improving user experience and displaying image details, and can be widely used in web design.

The above is the detailed content of Using JavaScript to implement the image magnifying glass function. For more information, please follow other related articles on the PHP Chinese website!

JavaScript html class JS 事件 position zoom

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Building a real-time translation tool based on JavaScriptNext article：Building a real-time translation tool based on JavaScript

See more

Using JavaScript to implement the image magnifying glass function

Related articles