<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--<link rel="stylesheet" href="css/index.css">-->
<style>
img {
display: block;
}
* {
margin: 0;
padding: 0;
}
.box {
width: 350px;
height: 350px;
margin: 100px;
border: 1px solid #ccc;
position: relative;
}
.big {
width: 400px;
height: 400px;
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 class="box" id="box">
<div class="small" id="small">
<img src="small.jpg" width="350" alt="" /> //你的图片地址
<div class="mask" id="mask"></div>
</div>
<div class="big" id="big">
<img src="big.jpg" width="800" alt="" id="img" /> //你的图片地址
</div>
</div>
</body>
<script>
class showImg {
constructor() {
this.boxObj = this.$('#box');
this.smallObj = this.$('#small');
this.maskObj = this.$('#mask');
this.bigObj = this.$('#big');
this.bImg = this.$('#img');
// 给small绑定鼠标移入,移出事件
this.smallObj.addEventListener('mouseenter', this.enterFn.bind(this));
this.smallObj.addEventListener('mouseleave', this.leaveFn.bind(this));
// 绑定鼠标移动事件
this.smallObj.addEventListener('mousemove', this.moveFn.bind(this));
}
// 移入
enterFn() {
// console.log(this);
// 1 显示小黄块和大图
this.maskObj.style.display = 'block';
this.bigObj.style.display = 'block';
}
// 移出
leaveFn() {
this.maskObj.style.display = 'none';
this.bigObj.style.display = 'none';
}
// 移动
moveFn(event) {
// console.log(event);
// 1 获取鼠标的实时位置
let mx = event.pageX;
let my = event.pageY;
// 2 获取box的坐标值
let boxT = this.boxObj.offsetTop;
let boxL = this.boxObj.offsetLeft;
// 3 计算滑块的坐标
let tmpX = mx - boxL - this.maskObj.offsetWidth / 2;
let tmpY = my - boxT - this.maskObj.offsetHeight / 2;
// 3-1 计算最大的坐标
let maxL = this.smallObj.offsetWidth - this.maskObj.offsetWidth;
let maxT = this.smallObj.offsetHeight - this.maskObj.offsetHeight;
// 4 判断边界值
if (tmpX < 0) tmpX = 0
if (tmpY < 0) tmpY = 0;
// 最大值设置
if (tmpX > maxL) tmpX = maxL;
if (tmpY > maxT) tmpY = maxT;
this.maskObj.style.left = tmpX + 'px';
this.maskObj.style.top = tmpY + 'px';
// 计算大图在div中,移动的最大位置
let bigL = this.bigObj.offsetWidth - this.bImg.offsetWidth;
let bigT = this.bigObj.offsetHeight - this.bImg.offsetHeight;
// 计算大图的实时位置
let tmpBigT = tmpY / maxT * bigT;
let tmpBigL = tmpX / maxL * bigL;
// 实时位置设置给大图
this.bImg.style.left = tmpBigL + 'px';
this.bImg.style.top = tmpBigT + 'px';
}
$(ele) {
return document.querySelector(ele)
}
}
new showImg;
</script>
</html>
通过JavaScript实现放大镜功能
最新推荐文章于 2024-08-14 10:08:54 发布