前端案例-18 移动的放大镜效果

最新推荐文章于 2022-03-06 18:01:23 发布

KathyLJQ

最新推荐文章于 2022-03-06 18:01:23 发布

阅读量253

点赞数 1

分类专栏：前端案例

本文链接：https://blog.csdn.net/kathyljq/article/details/115764059

版权

前端案例专栏收录该内容

32 篇文章 3 订阅

订阅专栏

该博客展示了如何使用HTML和JavaScript创建一个交互式的图片预览功能。当鼠标悬停在小图上时，会出现一个半透明的黄色遮罩，用户可以移动鼠标来预览大图的不同部分，大图会根据遮罩的位置实时缩放显示。这种效果常用于图片详情页，提供了一种优雅的方式来查看高分辨率图片。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<!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>
        .small_box {
            position: relative;
            width: 400px;
            height: 400px;
            border: 1px solid gray;
        }

        .small_box img {
            width: 100%;
            height: 100%;
        }

        .small_box .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background-color: yellow;
            opacity: .5;
            cursor: move;
        }

        .big_box {
            /* display: none; */
            position: absolute;
            top: 0;
            left: 420px;
            width: 500px;
            height: 500px;
            border: 1px solid gray;
            overflow: hidden;
        }

        .big_box img {
            position: absolute;
            top: 0;
            left: 0;
            width: 800px;
            height: 800px;
        }
    </style>


</head>

<body>
    <div class="small_box">
        <img src="upload/b3.png" alt="">
        <div class="mask"></div>
        <div class="big_box">
            <img src="upload/big.jpg" alt="">
        </div>
    </div>
    <script>
        var smallBox = document.querySelector('.small_box');
        var mask = document.querySelector(".mask");
        var bigBox = document.querySelector('.big_box');
        // show mask and big box when mouseover
        smallBox.addEventListener('mouseover', function () {
            mask.style.display = 'block';
            bigBox.style.display = 'block';
        })
        // hide mask and big box when mouseout
        smallBox.addEventListener('mouseout', function () {
            mask.style.display = 'none';
            bigBox.style.display = 'none';
        })
        // move mask and bigpicture when mousemove

        smallBox.addEventListener('mousemove', function (e) {
            //move mask when mousemove
            var left = e.pageX - smallBox.offsetLeft - mask.offsetWidth / 2;
            var top = e.pageY - smallBox.offsetTop - mask.offsetHeight / 2;
            var bigPic = document.querySelector('.big_box img');
            if (left <= 0) {
                mask.style.left = '0px';
                bigPic.style.left = '0px';
            } else if (left >= smallBox.offsetWidth - mask.offsetWidth) {
                mask.style.left = smallBox.offsetWidth - mask.offsetWidth + 'px';
                bigPic.style.left = bigBox.offsetWidth - bigPic.offsetWidth;
            }
            else {
                mask.style.left = left + 'px';
                bigPic.style.left = -(bigPic.offsetWidth / bigBox.offsetWidth) * left + 'px';
            }

            if (top <= 0) {
                mask.style.top = '0px';
                bigPic.style.top = '0px';
            } else if (top >= smallBox.offsetHeight - mask.offsetHeight) {
                mask.style.top = smallBox.offsetHeight - mask.offsetHeight + 'px';
                bigPic.style.top = bigBox.offsetHeight - bigPic.offsetHeight;
            } else {
                mask.style.top = top + 'px';
                bigPic.style.top = -(bigPic.offsetHeight / bigBox.offsetHeight) * top + 'px';
            }

            //move big picture when mousemove on small box





        })



    </script>

</body>

</html>

引入js文件方式

index.html

<!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>
    <link rel="stylesheet" href="index.css">

    <script type="text/javascript" src="index.js"></script>


</head>

<body>
    <div class="small_box">
        <img src="upload/b3.png" alt="">
        <div class="mask"></div>
        <div class="big_box">
            <img src="upload/big.jpg" alt="">
        </div>
    </div>
    

</body>

</html>

index.css

.small_box {
    position: relative;
    width: 400px;
    height: 400px;
    border: 1px solid gray;
}

.small_box img {
    width: 100%;
    height: 100%;
}

.small_box .mask {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background-color: yellow;
    opacity: .5;
    cursor: move;
}

.big_box {
    /* display: none; */
    position: absolute;
    top: 0;
    left: 420px;
    width: 500px;
    height: 500px;
    border: 1px solid gray;
    overflow: hidden;
}

.big_box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 800px;
    height: 800px;
}

index.js

window.addEventListener('load', function () {
    var smallBox = document.querySelector('.small_box');
    var mask = document.querySelector(".mask");
    var bigBox = document.querySelector('.big_box');
    // show mask and big box when mouseover
    smallBox.addEventListener('mouseover', function () {
        mask.style.display = 'block';
        bigBox.style.display = 'block';
    })
    // hide mask and big box when mouseout
    smallBox.addEventListener('mouseout', function () {
        mask.style.display = 'none';
        bigBox.style.display = 'none';
    })
    // move mask and bigpicture when mousemove

    smallBox.addEventListener('mousemove', function (e) {
        //move mask when mousemove
        var left = e.pageX - smallBox.offsetLeft - mask.offsetWidth / 2;
        var top = e.pageY - smallBox.offsetTop - mask.offsetHeight / 2;
        var bigPic = document.querySelector('.big_box img');
        if (left <= 0) {
            mask.style.left = '0px';
            bigPic.style.left = '0px';
        } else if (left >= smallBox.offsetWidth - mask.offsetWidth) {
            mask.style.left = smallBox.offsetWidth - mask.offsetWidth + 'px';
            bigPic.style.left = bigBox.offsetWidth - bigPic.offsetWidth;
        }
        else {
            mask.style.left = left + 'px';
            bigPic.style.left = -(bigPic.offsetWidth / bigBox.offsetWidth) * left + 'px';
        }

        if (top <= 0) {
            mask.style.top = '0px';
            bigPic.style.top = '0px';
        } else if (top >= smallBox.offsetHeight - mask.offsetHeight) {
            mask.style.top = smallBox.offsetHeight - mask.offsetHeight + 'px';
            bigPic.style.top = bigBox.offsetHeight - bigPic.offsetHeight;
        } else {
            mask.style.top = top + 'px';
            bigPic.style.top = -(bigPic.offsetHeight / bigBox.offsetHeight) * top + 'px';
        }

        //move big picture when mousemove on small box


    })
})