JS图片放大镜功能实现

JS图片放大镜功能实现

技术关键点
1.左侧和上侧距离，在一个水平位置和垂直位置中有我们可以挪动的区域，就是原图片区域，鼠标挪动位置是一个块状位置，他的左侧和上侧距离浏览器上侧和左侧分别有一个长度，我们叫它们 ClientX 和 ClientY，而左上侧鼠标没有略过的位置实际上是一个点，我们拖动放大块时，它会由一个点变成一个方块，这个放大镜左上边的点所控制的这一点距离屏幕上侧和左侧的 ClientY 和 ClientX 会随着鼠标的移动而变大变小，那么要计算放大块左侧距离原点和上侧原点就要减去原图距离屏幕的上边高度和左边高度。在一个水平位置和垂直位置中有我们可以挪动的区域，就是原图片区域，鼠标挪动位置是一个块状位置，他的左侧和上侧距离浏览器上侧和左侧分别有一个长度，我们叫它们 ClientX 和 ClientY，而左上侧鼠标没有略过的位置实际上是一个点，我们拖动放大块时，它会由一个点变成一个方块，这个放大镜左上边的点所控制的这一点距离屏幕上侧和左侧的 ClientY 和 ClientX 会随着鼠标的移动而变大变小，那么要计算放大块左侧距离原点和上侧原点就要减去原图距离屏幕的上边高度和左边高度。
x = 事件对象.clientX - 外侧盒子.offsetLeft;
Y = 事件对象.clientY - 外侧盒子.offsetTop;

HTML代码：

 <div id="main">
     
        <img src="images/bg.webp" width="100%">
 
        <div id="mirror">
            <img src="images/bg.webp">
        div>
    div>

JS代码：

CSS代码：

* {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            width: 100wh;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(200, 190, 221, .5);

        }

        img {
            display: block;
        }

        #main {
            width: 800px;
            box-shadow: 0 0 20px rgba(0, 0, 0, .4);
            position: relative;
            overflow: hidden;

        }

        #mirror {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            border: 5px solid #fff;
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
        }

        #mirror img {
            position: absolute;
        }

效果图：