用JS实现放大镜效果

最新推荐文章于 2024-12-05 11:29:32 发布

重生之我在青鸟写博客

最新推荐文章于 2024-12-05 11:29:32 发布

阅读量1.4k

点赞数 33

文章标签： javascript 开发语言 ecmascript 前端 es6

本文链接：https://blog.youkuaiyun.com/2403_88615647/article/details/143939119

版权

HTML代码：

<!DOCTYPE html>

<head>

<title>放大镜案例</title>

<style>

* {

margin: 0;

padding: 0;

}

/* 小图 */

.camera {

width: 300px;

height: 300px;

position: relative;

border: 1px solid black;

}

.cameraImg img {

width: 300px;

height: 300px;

}

/* 遮罩层 */

.zoom {

width: 100px;

height: 100px;

background-color: #ccc;

opacity: 0.8;

position: absolute;

top: 0px;

left: 0px;

display: none;

}

/* 大图 */

.bDiv {

width: 500px;

height: 500px;

background-color: bisque;

position: absolute;

left: 350px;

top: 0;

overflow: hidden;

display: none;

}

.bImg {

position: absolute;

top: 0;

left: 0;

}

</style>

</head>

<body>

</div>

</div>

</body>

</html>

JS代码：

ES5：

window.onload = function () {

var camera = document.querySelector(".camera");

var zoom = document.querySelector(".zoom");

var bDiv = document.querySelector(".bDiv");

var bImg = document.querySelector(".bImg");

// 1:给camera绑定鼠标移入移除事件，让鼠标移除时，放大镜跟展示页都消失

camera.onmouseenter = function () {

zoom.style.display = "block";

bDiv.style.display = "block";

};

camera.onmouseleave = function () {

// zoom.style.display = "none";

// bDiv.style.display = "none";

};

// 2:设置放大镜zoom能跟着鼠标移动，并设置范围活动

camera.onmousemove = function (event) {

//2.1 获得鼠标的页面坐标x,y

var x = event.pageX;

var y = event.pageY;

// console.log(x, y);

//2.2 获取图相对于页面的左边，上边相对距离

var offsetX = camera.offsetLeft;

var offsetY = camera.offsetTop;

// console.log(offsetX, offsetY);

// 2.3 获取遮挡层的宽度跟高度

var zoomW = zoom.offsetWidth;

var zoomH = zoom.offsetHeight;

// console.log(zoomW,zoomH);

// 2.4 计算遮挡物的xy坐标

var left = x - offsetX - zoomW / 2;

var top = y - offsetY - zoomH / 2;

// 2.5 设置判断left top的限制值

/* 遮盖物的最大移动距离，父元素camera的宽度减去遮盖物的宽度(300-100) */

if (left >= 200) {

left = 200;

}

if (left <= 0) {

left = 0;

}

if (top >= 200) {

top = 200;

}

if (top <= 0) {

top = 0;

}

//2.6 将宽高赋值给放大镜

zoom.style.left = left + "px";

zoom.style.top = top + "px";

/* 3、根据比例移动大图

遮罩层的移动距离 /遮罩层最大移动距离 = 大图片移动距离/大图片最大移动距离

根据上面的等式，可以演算出

大图片的移动距离=（遮罩层的移动距离 /遮罩层最大移动距离）*大图片最大移动距离 */

//3.1 计算大图在大盒子里移动的最大距离

/* 大图的宽度，减去bDiv框子的宽度*/

var bImgMw = bImg.offsetWidth - bDiv.offsetWidth;

var bImgMh = bImg.offsetHeight - bDiv.offsetHeight;

// console.log(bDiv.offsetWidth);

// 3.2 根据比例移动大图

var bX = (left / 200) * bImgMw;

var bY = (top / 200) * bImgMh;

// 3.3 将bX，bY赋值给大图的宽高

bImg.style.left = -bX + "px";

bImg.style.top = -bY + "px";

};

ES6:

window.onload = function () {

var that;

class Camera {

constructor() {

// 保存this

that = this;

// 获取整个盒子

this.camera = document.querySelector(".camera");

this.zoom = document.querySelector(".zoom");

this.bDiv = document.querySelector(".bDiv");

this.bImg = document.querySelector(".bImg");

//初始化放大镜的位置left，top

this.left = 0;

this.top = 0;

//初始化监听函数

this.addevent();

}

// 监听事件

addevent() {

//1.1、移入显示放大镜，移出隐藏放大镜

this.camera.addEventListener("mouseenter", that.showZoom);

this.camera.addEventListener("mouseleave", that.hiddZoom);

//2、移入，放大镜随着鼠标移动

this.camera.addEventListener("mousemove", that.zoomMove);

//2、放大镜移动，大图也随着移动

this.camera.addEventListener("mousemove", that.bDivMove);

}

//1.2 鼠标移入，显示放大镜及大图

showZoom() {

that.zoom.style.display = "block";

that.bDiv.style.display = "block";

}

hiddZoom() {

that.zoom.style.display = "none";

that.bDiv.style.display = "none";

}

// 1.2 放大镜随着鼠标移动

zoomMove(e) {

// （1）、鼠标在页面中的坐标

var x = e.pageX;

var y = e.pageY;

//(2)、大盒子camera在在页面中的位置

var offsetLeft = that.camera.offsetLeft;

var offsetTop = that.camera.offsetTop;

//（3）、计算zoom的大小

var zoomWidth = that.zoom.offsetWidth;

var zoomHeight = that.zoom.offsetHeight;

//（4）、计算盒子中鼠标的位置

that.left = x - offsetLeft - zoomWidth / 2;

that.top = y - offsetTop - zoomHeight / 2;

//(5)、限制放大镜的移动范围，camera-zoom

if (that.left <= 0) {

that.left = 0;

}

if (that.left >= 200) {

that.left = 200;

}

if (that.top <= 0) {

that.top = 0;

}

if (that.top >= 200) {

that.top = 200;

}

//(6)、将计算出的鼠标位置赋值给zoom

that.zoom.style.left = that.left + "px";

that.zoom.style.top = that.top + "px";

}

// 3、放大镜移动，大图也随着移动

// zoom移动距离/zoom最大移动距离 = 大图移动距离/大图最大移动距离

bDivMove() {

// 计算大图的最大移动距离大图-大图盒子大小

var bimgMaxWidth = that.bImg.offsetWidth - that.bDiv.offsetWidth;

var bimgMaxHeight = that.bImg.offsetHeight - that.bDiv.offsetHeight;

// 计算大图移动距离（zoom移动距离/zoom最大移动距离）*大图最大移动距离

var bimgLeft = (that.left / 200) * bimgMaxWidth;

var bimgTop = (that.top / 200) * bimgMaxHeight;

that.bImg.style.left = -bimgLeft + "px";

that.bImg.style.top = -bimgTop + "px";

}

new Camera();

};