简易放大镜实现原理

Posted 2022-08-16 勇敢*牛牛

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简易放大镜实现原理相关的知识，希望对你有一定的参考价值。

.mini 
     border: 1px solid #ccc;
     position: relative;
     float: left;
     /* 背景填充为填满 */
     background-size: 100% 100%;
 
 .max
     border:1px solid #ccc;
     /* position: relative; */
     float: left;
     /* display: none; */
 
 .mask
     background-color: rgba(200,186,50,0.3);
     position: absolute;
     /* display: none; */

分为三个盒子：min小盒子，mask遮罩层，max大图盒子。
根据图片大width和height来完成三个盒子的大小
确定第一个比例：原图和max的比例；（width，height）
这个图片就是这里的盒子的背景图片。

加载图片给成背景和生成盒子比例；

给小图添加鼠标事件

 mini.addEventListener("mouseenter",mouseHandler);

鼠标进入之后会有这个事件发生，记录鼠标移动的位置坐标。
mousemove事件，鼠标移动事件。

e.clientX

var x = e.clientX-rect.x-mask.offsetWidth/2;
var y = e.clientY-rect.y-mask.offsetHeight/2;

完整代码描述

<!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>
        .mini 
            border: 1px solid #ccc;
            position: relative;
            float: left;
            /* 背景填充为填满 */
            background-size: 100% 100%;
        
        .max
            border:1px solid #ccc;
            /* position: relative; */
            float: left;
            /* display: none; */
        
        .mask
            background-color: rgba(200,186,50,0.3);
            position: absolute;
            /* display: none; */
        
    </style>
</head>

<body>
    <div class="mini">
        <div class="mask"></div>
    </div>
    <div class="max"></div>
    <script>
        // SCALE 原图和max的比例
        // ZOOM_SCALE max和mini的比例
        // BN_WIDTH 轮播图左右按钮的宽度
        // ICON_WIDTH 轮播图中每个图片的宽度
        // MARGIN 轮播图距离左右按钮间距
        const SCALE = 1.4814814814814814,ZOOM_SCALE = 1.2
        init();
        var mini,mask,max;

        function init() 
            mini = document.querySelector(".mini");
            mask = document.querySelector(".mask");
            max = document.querySelector(".max");
            /* 图片加载 */
            loadImage("./img/10-.jpg")
            /* 给小图添加鼠标事件 */
            mini.addEventListener("mouseenter",mouseHandler);
        

        function loadImage(src) 
            var img = new Image();
            img.src = src;
            img.addEventListener("load", loadHandler);
        

        function loadHandler(e) 
            /* 这里就可以知道图片的大小 */
            console.log(this.width, this.height);
            /* 设置mini宽高 */
            Object.assign(mini.style,
                width:this.width/SCALE/ZOOM_SCALE+"px",
                height:this.height/SCALE/ZOOM_SCALE+"px",
            )
            /* 设置max宽高 */
            Object.assign(max.style,
                width:this.width/SCALE+"px",
                height:this.height/SCALE+"px",
            )
            /* 设置mask的宽高 */
            Object.assign(mask.style,
                width:this.width/SCALE/ZOOM_SCALE/SCALE+"px",
                height:this.height/SCALE/ZOOM_SCALE/SCALE+"px",
            )

            /* 给mini和max设置背景图 */
            max.style.backgroundImage=mini.style.backgroundImage = `url($this.src)`

        
        function mouseHandler(e)
            if(e.type === "mouseenter")
                console.log("我进来拉");
                mini.addEventListener("mousemove",mouseHandler);
                mini.addEventListener("mouseleave",mouseHandler)
            else if(e.type === "mouseleave")
                console.log("我又出去拉");
                mini.removeEventListener("mousemove",mouseHandler);
                mini.removeEventListener("mouseleave",mouseHandler);
            else
                /* 鼠标移动的位置 */
                var rect = mini.getBoundingClientRect();
                console.log(e.clientX,e.clientY);
                /* 给mask移动起来 */
                /*移动的位置= 鼠标位置-父容器距离左边的距离-子容器自身的一半 */
                var x = e.clientX-rect.x-mask.offsetWidth/2;
                var y = e.clientY-rect.y-mask.offsetHeight/2;

                if(x<0) x=0
                else if(x>rect.width-mask.offsetWidth) x= rect.width-mask.offsetWidth;
                if(y<0) y=0
                else if(y>rect.height-mask.offsetHeight) y= rect.height-mask.offsetHeight;
                Object.assign(mask.style,
                    left:x +"px",
                    top:y +"px",
                )
                Object.assign(max.style,
                    backgroundPositionX:-x*(SCALE*ZOOM_SCALE)+"px",
                    backgroundPositionY:-y*(SCALE*ZOOM_SCALE)+"px",
                )
            
        
    </script>
</body>

</html>

以上是关于简易放大镜实现原理的主要内容，如果未能解决你的问题，请参考以下文章