vue版本的仿京东放大镜
<template>
<div class="maxBox">
<div
ref="left"
class="left"
@mousemove="showImg"
@mouseleave="flag = false"
>
<img
src="https://imgres.crsky.com/crsky/60/297162-20210421095209607f8549bd770.jpg"
alt=""
/>
<div v-show="flag" ref="mask" class="mask"></div>
</div>
<div v-show="flag" ref="right" class="right">
<img
ref="maxImg"
src="https://imgres.crsky.com/crsky/60/297162-20210421095209607f8549bd770.jpg"
alt=""
/>
</div>
</div>
</template>
<script>
export default {
data() {
return {
flag: false,
};
},
methods: {
showImg(e) {
this.flag = true;
let left = this.$refs.left;
// 获取鼠标在 left 的当前坐标
let x = e.pageX - left.offsetLeft; //x轴的
let y = e.pageY - left.offsetTop;
// 拿到小方块的坐标
let mask = this.$refs.mask;
// 小方块移动的坐标 例：小方块移动的横向坐标就是 x-小方块的一半
var maskX = x - mask.offsetWidth / 2;
var maskY = y - mask.offsetHeight / 2;
// 小方块可以移动的最大横向坐标 最大盒子 - 小盒子算出可移动范围
let maxX = left.offsetWidth - mask.offsetWidth;
let maxY = left.offsetHeight - mask.offsetHeight;
// 判断横向超出，让他不超出 移动的坐标 大于 可移动的范围 赋值为最大的值
if (maskX > maxX) {
maskX = maxX;
} else if (maskX < 0) {
maskX = 0;
}
// 判断纵向
if (maskY > maxY) {
maskY = maxY;
} else if (maskY < 0) {
maskY = 0;
}
mask.style.left = maskX + "px";
mask.style.top = maskY + "px";
// 右边盒子
let rightBox = this.$refs.right;
// 右边大图的位置
let maxImg = this.$refs.maxImg;
// 大图片的移动的最大距离
let imgMaxX = maxImg.offsetWidth - rightBox.offsetWidth;
let imgMaxY = maxImg.offsetHeight - rightBox.offsetHeight;
// 放大镜图片移动的距离
let imgX = maskX * (imgMaxX / maxX);
let imgY = maskY * (imgMaxY / maxY);
maxImg.style.left = -imgX + "px";
maxImg.style.top = -imgY + "px";
},
},
};
</script>
<style lang="scss" scoped>
* {
padding: 0;
margin: 0;
}
.mask {
width: 220px;
height: 220px;
background-color: rgba(29, 192, 201, 0.4);
position: absolute;
}
.maxBox {
width: 1000px;
height: 800px;
margin: 10px auto;
display: flex;
}
.left {
width: 350px;
height: 350px;
border: 1px solid rgb(209, 208, 208);
position: relative;
&:hover {
cursor: move;
}
img {
width: 100%;
height: 100%;
}
}
.right {
width: 500px;
height: 500px;
border: 1px solid rgb(202, 202, 202);
position: relative;
overflow: hidden;
img {
width: 1000px;
height: 1000px;
position: absolute;
flex-shrink: 0;
left: 0;
top: 0;
}
}
</style>
原生js版本放大镜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.goods {
width: 300px;
height: 400px;
position: relative;
margin-left: 100px;
float: left;
}
.goods img {
width: 100%;
height: 100%;
}
.mask {
width: 200px;
height: 200px;
background-color: rgba(247, 150, 4, 0.8);
position: absolute;
top: 0;
left: 30px;
cursor: move;
display: none;
}
.big {
width: 400px;
height: 500px;
position: relative;
float: left;
margin-left: 20px;
overflow: hidden;
}
.big img {
width: 800px;
height: 1000px;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="hh">
<div class="goods">
<img src="https://imgres.crsky.com/crsky/60/297162-20210421095209607f8549bd770.jpg" alt="" />
<div class="mask"></div>
</div>
<div class="big" style="display: none">
<img src="https://imgres.crsky.com/crsky/60/297162-20210421095209607f8549bd770.jpg" alt="" />
</div>
</div>
<script>
// 1、先获取元素
var goods = document.querySelector(".goods");
var mask = document.querySelector(".mask");
var hh = document.querySelector(".hh");
var big = document.querySelector(".big");
hh.onmouseover = function () {
big.style.display = "block";
};
hh.onmouseout = function () {
big.style.display = "none";
};
goods.onmouseover = function () {
mask.style.display = "block";
};
goods.onmouseout = function () {
mask.style.display = "none";
};
goods.onmousemove = function (event) {
// 2、获取鼠标在goods里面的坐标
var x = event.pageX - goods.offsetLeft;
var y = event.pageY - goods.offsetTop;
// 3、小方块移动的坐标 例：小方块移动的横向坐标就是 x-小方块的一半
var maskX = x - mask.offsetWidth / 2;
var maskY = y - mask.offsetHeight / 2;
// 4、小方块可以移动的最大横坐标
var maxX = goods.offsetWidth - mask.offsetWidth;
var maxY = goods.offsetHeight - mask.offsetHeight;
// 判断横向超出，让他不超出
if (maskX > maxX) {
maskX = maxX;
} else if (maskX < 0) {
maskX = 0;
}
// 判断纵向超出，让他不超出
if (maskY > maxY) {
maskY = maxY;
} else if (maskY < 0) {
maskY = 0;
}
// 小方块移动的距离
mask.style.left = maskX + "px";
mask.style.top = maskY + "px";
var big = document.querySelector(".big");
var img = big.children[0];
// 5、大图片移动的最大距离
var imgMaxX = img.offsetWidth - big.offsetWidth;
var imgMaxY = img.offsetHeight - big.offsetHeight;
// 放大镜图片移动的距离
var imgx = maskX * (imgMaxX / maxX);
var imgy = maskY * (imgMaxY / maxY);
img.style.left = -imgx + "px";
img.style.top = -imgy + "px";
};
</script>
</body>
</html>