【JS】放大镜

最新推荐文章于 2024-11-02 12:42:04 发布

蘑菇栗子

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量82

点赞数

分类专栏： js小实例/小功能文章标签： javascript css3 前端

本文链接：https://blog.csdn.net/xxxxxwxx/article/details/126438177

版权

js小实例/小功能专栏收录该内容

60 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用HTML、CSS和JavaScript创建一个网页放大镜效果。通过监听鼠标移动事件，实现实时调整小图上的黄色选区与大图显示区域的同步移动，从而达到放大查看细节的目的。代码中包括了关键的数学公式和边界值检查，确保了放大过程的平滑和准确。此功能适用于产品展示或图像查看等场景。

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

效果图

在这里插入图片描述
跟随鼠标移动放大对应部分
注：视觉上感觉放大的不是很准确，是因为小图和大图的大小我没有定义为1：2或者其他准确的比例，调整在CS或行内调整一下图片大小即可

放大镜公式：

小黄块实时位置/小黄块最大值==大图的实时位置/大图移动的最大距离
大图移动的最大距离为大图盒子的宽高减去大图的宽高

HTML

<div class="box" id="box">
        <div class="small" id="small">
            <img src="../images/small.jpg" width="350" alt="" />
            <div class="mask" id="mask"></div>
        </div>
        <div class="big" id="big">
            <img src="../images/big.jpg" width="800" alt="" id="img" />
        </div>
    </div>

CSS

<style>
        img {
            display: block;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 350px;
            height: 350px;
            margin: 100px;
            border: 1px solid #ccc;
            position: relative;
        }

        .big {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 360px;
            overflow: hidden;
            display: none;
        }

        .big img {
            position: absolute;

        }

        .mask {
            width: 100px;
            height: 100px;
            background: rgba(255, 255, 0, 0.4);
            position: absolute;
            top: 0px;
            left: 0px;
            cursor: move;
            display: none;
        }

        .small {
            position: relative;
        }
    </style>

JS

//获取元素
    let box = document.querySelector('#box'),//最大的盒子
        small = document.querySelector('#small'),//小图盒子
        mask = document.querySelector('#mask'),//小黄块
        big = document.querySelector('#big'),//大图盒子
        bigImg = big.firstElementChild;//大图
    //设置鼠标移入移出和移动事件
    //鼠标移入
    small.onmouseover = function () {
        //小黄块和大图出现
        mask.style.display = 'block';
        big.style.display = 'block';
    }
    //鼠标移出
    small.onmouseout = function () {
        //小黄块和大图消失
        big.style.display = 'none';
        mask.style.display = 'none';
    }
    //鼠标移动
    small.onmousemove = function (eve) {
        eve = eve || window.event;
        //获取鼠标相对于文档的实时位置
        let px = eve.pageX,
            py = eve.pageY;
        //获取盒子相对于文档的位置
        let smallX = box.offsetLeft,
            smallY = box.offsetTop;
        //小黄块的实时位置为鼠标相对于文档的实时位置减去盒子距文档的距离
        //再减去小黄块宽高的一半，令鼠标一直在小黄块中间
        let tmpSmallX = px - smallX - mask.offsetWidth / 2,
            tmpSmallY = py - smallY - mask.offsetHeight / 2;
        //小黄块移动的最大值
        let smallMaxX = small.offsetWidth - mask.offsetWidth;
        let smallMaxY = small.offsetHeight - mask.offsetHeight;
        //设置边界值
        //检测最小值
        tmpSmallX = tmpSmallX < 0 ? 0 : tmpSmallX;
        tmpSmallY = tmpSmallY < 0 ? 0 : tmpSmallY;
        //检测最大值
        tmpSmallX = tmpSmallX > smallMaxX ? smallMaxX : tmpSmallX;
        tmpSmallY = tmpSmallY > smallMaxY ? smallMaxY : tmpSmallY;
        //设置小黄块的实时位置
        mask.style.left = tmpSmallX + 'px';
        mask.style.top = tmpSmallY + 'px';

        //设置大图的实时位置
        // 小黄块实时位置/小黄块最大值==大图的实时位置/大图移动的最大距离

        //大图移动的最大距离 为大图盒子的宽高减去大图的宽高
        let bigMaxX = big.offsetWidth - bigImg.offsetWidth;
        let bigMaxY = big.offsetHeight - bigImg.offsetHeight;
        //大图实时位置
        bigImg.style.left = tmpSmallX / smallMaxX * bigMaxX + 'px';
        bigImg.style.top = tmpSmallY / smallMaxY * bigMaxY + 'px';
    }