JS实现放大镜-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_71144319/article/details/129652107

本文介绍了使用JavaScript实现前端图片放大镜效果的思路和代码。关键步骤包括：1) 创建小放大镜和大放大镜元素；2) 图片加载完成后获取宽高；3) 绑定事件处理函数；4) 计算并更新放大镜位置和大图显示。通过这种方法，可以实现实时预览并放大图片细节的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、放大镜

放大镜主要有两部分，一部分是小放大镜，一部分是大放大镜，都是默认隐藏，当悬浮时出现；

二、图片部分

图片原图为正常大小，放大镜所显示图片为倍数增加大小

切记：无论放大镜还是图片都是以倍数关系进行放大显示，若不是则会出现放大之后出现大小放大镜无法一致的问题

图片也是种资源,执行到img标签时,才去请求图片资源.js代码会继续执行，直接获取图片的宽高是不行的,因为图片资源没有加载完成.

三、思路

给小图绑定事件

构造移入事件函数（设置display属性，鼠标移入显示小黄块，放大的图也显示）

构造移出事件函数（设置display属性，使其隐藏）

获取box定位

获取大图的宽度和高度

计算小黄块能够移出的最大left和top

获取鼠标相对于文档的坐标（因没有滚动条和可视区的宽高一致）

进行判断不能超出左侧和上侧，右边界和下边界

计算大图移动的最大位置

实时记录大图的位置并进行设置

用$获取节点

四、代码如下

<!DOCTYPE html>

<html>

<style>

img {

display: block;

}

* {

margin: 0;

padding: 0;

}

.box {

width: 350px;

height: 292px;

margin: 100px;

border: 1px solid #ccc;

position: relative;

}

.big {

width: 350px;

height: 292px;

position: absolute;

top: 0;

left: 360px;

overflow: hidden;

display: none;

}

.big img {

position: absolute;

}

.mask {

width: 100px;

height: 100px;

background: rgba(255, 255, 0, 0.4);

position: absolute;

top: 0px;

left: 0px;

cursor: move;

display: none;

}

.small {

position: relative;

}

</style>

</head>

<body>

</div>

</div>

</body>

window.onload = function () {

/**使用函数编程**/

+function () {

// 给small 绑定事件

$('.small').onmouseover = overHandler;

$('.small').onmouseout = outHandler;

$('.small').onmousemove = moveHandler;

}();

// 移入事件的回调函数

function overHandler() {

// 显示小黄块

$('.mask').style.display = 'block';

// 显示大图

$('.big').style.display = 'block';

}

// 移出事件的回调函数

function outHandler() {

$('.mask').style.display = 'none';

$('.big').style.displ获取ay = 'none';

}

// 获取 box的定位

let boxLeft = $('.box').offsetLeft;

let boxTop = $('.box').offsetTop;

//获取大图的宽度和高度

let sw = $('.small').offsetWidth;

let sh = $('.small').offsetHeight;

// console.log(sw, sh);

function moveHandler(eve) {

let mw = $('.mask').offsetWidth;

let mh = $('.mask').offsetHeight;

// 计算小黄块能够移动的最大left和top

let maskMaxL = sw - mw;

let maskMaxT = sh - mh;

// 获取鼠标相对于文档的坐标(没有滚动条和可视区的一致)

let mouseX = eve.pageX;//eve.clientX;

let mouseY = eve.pageY;//eve.clientY;

// console.log(mouseX, mouseY);

let maskX = mouseX - boxLeft - mw / 2;

let maskY = mouseY - boxTop - mh / 2;

// 判断不能超出左侧和上侧

if (maskX < 0) maskX = 0

if (maskY < 0) maskY = 0

// 判断不能超出右边界和下边界

// console.log(maskMaxL, maskMaxT);

if (maskX > maskMaxL) maskX = maskMaxL;

if (maskY > maskMaxT) maskY = maskMaxT

$('.mask').style.left = maskX + 'px'

$('.mask').style.top = maskY + 'px'

// 计算大图移动的最大位置

let bigMaxLeft = $('#big').offsetWidth - $('#img').offsetWidth;

let bigMaxTop = $('#big').offsetHeight - $('#img').offsetHeight;

// console.log(bigMaxLeft, bigMaxTop);

// 计算大图的实时位置且进行设置

$('#img').style.left = maskX / maskMaxL * bigMaxLeft + 'px'

$('#img').style.top = maskY / maskMaxT * bigMaxTop + 'px'

}

// 获取节点方法

function $(ele) {

let res = document.querySelectorAll(ele);

return res.length == 1 ? res[0] : res;

}

</script>

</html>

五、效果如下

六、总结：

1、原图宽高比例=缩略图宽高比=放大镜的宽高比

2、大放大镜与小放大镜的倍数=原图与缩略图的倍数

3、原图相对于小放大镜反方向移动相应倍数的距离

4. 先判断移动的位置是否符合要求再让小方格移动。

5. 小方块的移动距离

left = 获取的鼠标X位置 - 最外面盒子的距离视图窗口左侧距离 - 小盒子距离外层盒子的左侧距离 - 小格子的宽度 / 2;

top = 获取的鼠标Y位置 - 最外面盒子的距离视图窗口顶部距离 - 小盒子距离外层盒子的顶部距离 - 小格子的高度 / 2。

6. 小方格的移动范围限制

left 取值在 0 -（小盒子的宽度 - 小方格的宽度）；

top 取值在 0 - （小盒子的高度 - 小方格的高度）。

欢迎大佬们批评指正，共同进步，一起加油！！！！！0.0