js放大镜实现（案例）

@万里挑一

已于 2022-09-23 19:20:43 修改

阅读量360

点赞数 2

分类专栏： javascript 文章标签： javascript 前端 java

于 2022-09-22 20:00:08 首次发布

本文链接：https://blog.csdn.net/qq_59599812/article/details/126998260

版权

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

步骤解读：

1.放大镜主要运用了鼠标移入移出和鼠标移动事件

2.最核心的是：要会获取鼠标的位置（鼠标点击的地方的x轴和y轴坐标）

获取方法1： var x = ev.clientX-smallBox.offsetLeft;

var y = ev.clientY-smallBox.offsetTop;

(ev是事件对象，其他文章有)

获取方法2： var x = ev.offsetX;

var y = ev.offsetY;（注意：方法2有兼容问题）

3.还要会判断边界位置和获取遮罩层的位置

4.我准备了三张图：小图大图放大图==>移入小图，显示大图，在大图中移动，放大图随之移动

话不多说，直接上案例

<!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>
        .box{
            position: relative;
        }
        #smallBox,#bigBox{
            width: 400px;
            height: 400px;
            border: 1px solid red;
        }
        #smallBox img{
            width: 400px;
        }
        #bigBox{
            position: absolute;
            left: 420px;
            top: 0;
            overflow: hidden;
            display: none;
        }
        #smallBox{
            position: relative;
        }
        #mask{
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background-color: rgba(255, 255, 0, 0.274);
            display: none;
            cursor: move;
        }
        #minBox{
            width: 60px;
            height: 60px;
            border: 1px solid red;
        }
        #minBox img{
            width: 100%;
        }

    </style>
</head>
<body>
    <div class="box">
              <!-- 小图：400*400 -->
        <div id="smallBox">
                 <!-- 移入图层 -->
            <img src="" alt="image">
                 <!-- 鼠标遮罩层 -->
            <div id="mask"></div>
        </div>
                 <!-- 大图：800*800 -->
        <div id="bigBox">
            <img src="./img/放大图.jpg" alt="image">
        </div>
    </div>
          <!-- mini图 -->
    <div id="minBox">
        <img src="./img/小图.png" alt="image">
    </div>
</body>
    <script>
        // 获取元素
        var smallBox = document.getElementById('smallBox');
        var minBox = document.getElementById('minBox');
        var bigImg = document.querySelector('#bigBox img');
        var mask = document.getElementById('mask');
        var bigBox = document.getElementById('bigBox');

        // 需求1：移入minBox后，smallBox图片显示
        minBox.onmouseover = function(){
            smallBox.children[0].src = "./img/大图.jpg";
        }

        // 需求2：移入 smallBox 展示 bigBox 和 mask;
        smallBox.onmouseover = function(){
            mask.style.display = "block";
            bigBox.style.display = "block";
        }

        // 需求3: 移出 smallBox 隐藏 bigBox 和 mask;
        smallBox.onmouseout = function(){
            mask.style.display = "none";
            bigBox.style.display = "none";
        }

        // 需求4: 遮罩层
        smallBox.onmousemove = function(ev){
            // 4.1 获取鼠标的位置
            var x = ev.clientX-smallBox.offsetLeft;
            // var x = ev.offsetX;
            var y = ev.clientY-smallBox.offsetTop;
            // var y = ev.offsetY;
           
            // 4.2 判断边界的位置
            if(x <= 100){
                x = 100;
            }
            if(x >= 300){
                x = 300;
            }
            if(y <= 100){
                y = 100;
            }
            if(y >= 300){
                y = 300;
            }


            // 4.3 获取遮罩层的位置
            // 遮罩层的中心点 = 鼠标位置 - 遮罩层大小的一半;
            mask.style.left = x - 100 + 'px';
            mask.style.top = y - 100 + 'px';


            //4.4 放大图展示
            bigImg.style.marginLeft = -x*2 + 100*2 + 'px';
            bigImg.style.marginTop = -y*2 + 100*2 + 'px';
        }

        
    </script>
</html>