【原生态JS实现放大镜案例】

pink学生

已于 2022-09-18 16:33:30 修改

阅读量98

点赞数

分类专栏：代码参考文章标签： javascript html 前端

于 2022-09-18 16:26:36 首次发布

本文链接：https://blog.csdn.net/weixin_64356463/article/details/126919253

版权

代码参考专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        #min{
            width: 450px;
            height: 450px;
            border: 1px solid #000;
            float: left;
            position: relative;
        }
        #mask{
            width: 200px;
            height: 200px;
            background-color: rgba(255,255,0,0.4);
            position: absolute;
            top: 0px;
            left: 0px;
            display: none;
        }
        #max{
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            overflow: hidden;
            float: left;
            margin-left: 100px;
            position: relative;

            display: none;
        }
        #maxImg{
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
</head>
<body>
    <!-- 小盒子 -->
    <div id="min">
        <!-- 小图片 -->
        <img src="min.jpg" alt="">
        <!-- 蒙版 -->
        <div id="mask">

        </div>
    </div>
    <!-- 大盒子 -->
    <div id="max">
        <!-- 大图片 -->
        <img src="max.jpg" alt="" id="maxImg">
    </div>
    <script>
        // 需求：
        // 1、鼠标移入小盒子，蒙版出现，大盒子出现
        // 2、蒙版跟随鼠标
        // 3、蒙版移动，大盒子图片也移动

        // 获取元素
        var min = document.getElementById('min');
        var mask = document.getElementById('mask');
        var max = document.getElementById('max');
        var maxImg = document.getElementById('maxImg');

        // 鼠标移入小盒子里，蒙版出现，大盒子出现
        min.onmouseover = function(){
            // 出现
            mask.style.display = 'block';
            max.style.display = 'block';
        }
        // 蒙版跟随鼠标移动
        min.onmousemove = function(e){
            // 先求出鼠标在盒子内的坐标
            var minX = e.pageX - min.offsetLeft;
            var minY = e.pageY - min.offsetTop;
            // 求出光标在蒙版中的位置
            minX = minX - mask.offsetWidth / 2;
            minY = minY - mask.offsetHeight / 2;
            // 求出蒙版可移动最大距离
            var maskMaxX =  min.offsetWidth - mask.offsetWidth;
            var maskMaxY =  min.offsetHeight - mask.offsetHeight;
            // 判断蒙版移动的最大距离归零
            if(minX > maskMaxX){
                minX = maskMaxX;
            }else if(minX < 0){
                minX = 0;
            }
            if(minY > maskMaxY){
                minY = maskMaxY;
            }else if(minY < 0){
                minY = 0;
            }
            // 设定蒙版的位置
            mask.style.left = minX + 'px';
            mask.style.top = minY + 'px';
            // 蒙版移动，大盒子里的图片跟着移动
            // 求比例关系
            var ratioX = minX / maskMaxX;
            var ratioY = minY / maskMaxY;
            // 求出的大图片的移动距离，赋值给图片的定位值
            maxImg.style.left = ratioX * (max.offsetWidth - maxImg.offsetWidth) + 'px';
            maxImg.style.top = ratioY * (max.offsetHeight - maxImg.offsetHeight) + 'px';
        }
        // 鼠标移出小盒子里，蒙版消失，大盒子消失
        min.onmouseout = function(){
            // 消失
            mask.style.display = 'none';
            max.style.display = 'none';
        }
    </script>
</body>
</html>