JS图片放大镜功能实现

2022 年 11 月 19 日
笔记
javascript, 放大镜

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代码：

<script>
        //获取元素
        let oMain = document.querySelector('#main')

        let oMirror = document.querySelector('#mirror')

        let oBigimg = document.querySelector('#mirror img')
        //设置鼠标移动监听事件
        oMain.addEventListener('mousemove', e => {
            //获取鼠标在主图盒子内的XY坐标,减去偏移值
            let x_left = e.clientX - oMain.offsetLeft;
            let y_top = e.clientY - oMain.offsetTop;
            //将获取到的鼠标XY坐标,赋值给 oMirror遮罩层盒子的定位坐标
            //注意一定后面+'px',不然没效果
            oMirror.style.left = x_left - oMirror.offsetWidth / 2 + 'px';
            oMirror.style.top = y_top - oMirror.offsetHeight / 2 + 'px';
            //大图的X轴移动距离
            let bigImgleft = oBigimg.offsetWidth / oMain.offsetWidth * x_left - oMirror.offsetWidth / 2;
            //大图的Y轴移动距离
            let bigImgTop = oBigimg.offsetHeight / oMain.offsetHeight * y_top - oMirror.offsetHeight / 2;
            //坐标赋值,让大图跟着遮罩层一起移动
            oBigimg.style.left = -bigImgleft + 'px';
            oBigimg.style.top = -bigImgTop + 'px';


        })
</script>

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;
        }

效果图：

Tags: javascript 放大镜