放大镜效果

最新推荐文章于 2024-10-11 17:39:47 发布

Sodapease

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量552

点赞数 1

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/Sodapease/article/details/128690912

版权

该文章介绍了如何使用HTML、CSS和JavaScript（jQuery库）来创建一个图片放大镜功能。当鼠标移到图片上时，会出现一个黄色的正方形框，框内的图像会以2.4倍的大小在图片右侧显示。文章详细讲解了实现原理，并提供了完整的代码示例。

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

需求

1.鼠标移至图片上方，鼠标周围出现黄色的的正方形框，黄色矩形框会随着鼠标的移动而移动;

2.将黄色正方形框里的内容的长和宽均放大2.4倍。并在图片右边进行显示。

实现原理

需求	实现原理
鼠标移至图片上方，鼠标周围出现黄色的的正方形框	设置鼠标移入移出事件，移入时用jq设置黄色矩形和放大镜显示，移出则隐藏
鼠标移至图片上方，鼠标周围出现黄色的的正方形框
黄色矩形框会随着鼠标的移动而移动	给黄色矩形绑定鼠标移动事件，鼠标在页面的位置减去，图片的偏移距离，减去自身的一半（保证鼠标在矩形居中）
黄色矩形框会随着鼠标的移动而移动
长和宽均放大2.4倍	固定放大镜盒子为矩形框的2.4倍，例50px-->120px
在图片右边进行显示	隐藏的大图=获取左图的左边位置+宽度+10(与缩略图隔开出缝隙)+px

代码

<!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>magnify</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .initial{
            margin-left: 40px;
            margin-top: 50px;
            width: 100px;
            height: 200px;
        }

        .initial>img{
            width: 100px;
            height: 200px;
        }

        .mask{
            width: 50px;
            height: 50px;
            background: #fede4f;
            opacity: .5;
            position: absolute;
        }

        #magnifier{
            width: 120px;
            height: 120px;
            position: absolute;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="initial">
        <img src="./rabbit.jpg" />
    <div class="mask"></div>
    </div>

    <div id="magnifier">
        <img id="magnifierImg" src="./rabbit.jpg" />
    </div>
    <script src="./jquery-3.6.3.js"></script>
    <script>
        //鼠标移入事件
        $(".initial").mouseenter(function () {
            //鼠标移入到初始图时候实现,上面出现的黄色矩形
            $(".mask").show()
            $("#magnifier").css("top", initial.offsetTop + "px");
            //在图片右边进行显示
            magnifier.style.left = initial.offsetLeft + initial.offsetWidth + 10 + "px";
            //右侧的大图区域显示出来图片
            $("#magnifier").show()
        });
        //鼠标移出事件,鼠标移出缩略图的时候大图和矩形隐藏
        $(".initial").mouseleave(function () {
            $(".mask").hide()
            $("#magnifier").hide()
        }); 
        let initial = $(".initial")[0];
        let mask = $(".mask")[0];
        let magnifier = document.getElementById("magnifier");
        let magnifierImg = document.getElementById("magnifierImg");
        //让黄色矩形跟随鼠标移动，给黄色矩形绑定鼠标移动事件
        $(".initial").mousemove(function (e) {
            let even = e || event; //兼容浏览器
            let x = even.clientX - initial.offsetLeft - mask.offsetWidth / 2;
            let y = even.clientY - initial.offsetTop - mask.offsetHeight / 2;
            //获取水平方向的最大值
            let Xmax = initial.clientWidth - mask.clientWidth;
            //获取竖直方向的最大值
            let Ymax = initial.clientHeight - mask.clientHeight;
            if (x < 0) {
                //控制矩形在不超过父容器左侧移动
                x = 0;
            }
            //控制矩形在不超过父容器右侧移动
            if (x > Xmax) {
                x = Xmax;
            }
            //控制矩形在不超过父容器上侧移动
            if (y < 0) {
                y = 0;
            }
            //控制矩形在不超过父容器下侧移动
            if (y > Ymax) {
                y = Ymax;
            }
            mask.style.top = (y + initial.offsetTop) + "px";
            mask.style.left = (x + initial.offsetLeft) + "px";
            //比例计算：鼠标在缩略图的位置与缩略图宽高比=鼠标在大图位置与大图宽高比，未知数是大图鼠标的位置
            magnifier.scrollLeft = x / Xmax * (magnifierImg.clientWidth - magnifier.clientWidth);
            magnifier.scrollTop = y / Ymax * (magnifierImg.clientHeight - magnifier.clientHeight);
        });
    </script>
</body>
</html>