js+html+css实现放大镜效果

最新推荐文章于 2021-12-01 15:53:55 发布

司空不见惯

最新推荐文章于 2021-12-01 15:53:55 发布

阅读量119

点赞数

分类专栏： JavaWeb学习文章标签： javascript

本文链接：https://blog.csdn.net/qq_44961203/article/details/112428473

版权

JavaWeb学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .preview-img {
            position: relative;
            height: 398px;
        }

        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 300px;
            height: 300px;
            background-color: skyblue;
            opacity: .4;
            border: 1px solid #ccc;
            cursor: move;
        }

        .big {
            overflow: hidden;
            display: none;
            position: absolute;
            top: 0;
            left: 410px;
            width: 500px;
            height: 500px;
            background-color: pink;
            z-index: 99;
            border: 1px solid #ccc;
        }

        .big img {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
<script>
    window.addEventListener('load', function() {
        var preview_img = document.querySelector('.preview-img');
        var mask = document.querySelector('.mask');
        var big = document.querySelector('.big');
        // 显示与隐藏
        preview_img.addEventListener('mouseover', function() {
            mask.style.display = 'block';
            big.style.display = 'block';
        });
        preview_img.addEventListener('mouseout', function() {
            mask.style.display = 'none';
            big.style.display = 'none';
        });
        // 盒子跟随鼠标移动
        preview_img.addEventListener('mousemove', function(e) {
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            var maskX = x - mask.offsetWidth / 2;
            var maskY = y - mask.offsetHeight / 2;
            var maskMax = preview_img.offsetHeight - mask.offsetHeight;
            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';

            // 大图，根据比例计算坐标
            var bigImg = document.querySelector('.bigImg');
            var bigMax = bigImg.offsetWidth - big.offsetWidth;
            var bigX = bigMax * maskX / maskMax;
            var bigY = bigMax * maskY / maskMax;
            bigImg.style.left = -bigX + 'px';
            bigImg.style.top = -bigY + 'px';
        });
    });
</script>
<div class="preview-img">
    <img src="https://s1.ax1x.com/2020/10/12/027yRg.jpg" alt="">
    <div class="mask"></div>
    <div class="big">
        <img src="https://s1.ax1x.com/2020/10/12/0276zQ.jpg" alt="" class="bigImg">
    </div>
</div>
</body>

</html>

司空不见惯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js+html+css实现放大镜效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .preview-img {
复制链接

扫一扫

专栏目录