Magnifying glass, moving proportionally
选择元素
绑定事件
进入
显示
离开
隐藏
移动
遮罩层跟随鼠标移动
边界限定
计算移动的距离占了总距离的比例
根据比例，设置右侧图片的位置
function Magnifier(){
// // 1. 选择元素
// // 2. 绑定事件
// }
// Magnifier.prototype.addEvent = function(){
// // 进入事件
// // 3. 显示
// // 离开事件
// // 4. 隐藏
// // 移动事件
// // 5. 跟随移动功能，计算比例，设置位置
// }
// Magnifier.prototype.show = function(){
// // 显示
// }
// Magnifier.prototype.hide = function(){
// // 隐藏
// }
// Magnifier.prototype.move = function(){
// // 移动
// // 计算比例
// // 设置
// }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.cont{
width:1000px;margin: 0 auto;}
.cont::after{
content: "";width:0;height:0;overflow: hidden;clear: both;display: block;}
.small_box{
width:200px;height:300px;float: left;position: relative}
.small_box img{
width:200px;height:300px;}
.small_box span{
background: rgba(0,0,255,0.7);display: block;position: absolute;left: 0;top:0;display: none}
.big_box{
width:200px;height:300px;float: left;display: none;overflow: hidden;margin-left: 100px;position: relative;}
.big_box img{
width:400px;height:600px;position: absolute;left:0;top:0;}
</style>
</head>
<body>
<div class="cont">
<div class="small_box">
<img src="../imgs/1.jpg" alt="">
<span></span>
</div>
<div class="big_box">
<img src="../imgs/1.jpg" alt="">
</div>
</div>
</body>
<script>
function Magnifier(){
// 1. 选择元素
this.sBox = document.querySelector(".small_box");
this.span = document.querySelector(".small_box span");
this.bBox = document.querySelector(".big_box");
this.bImg = document.querySelector(".big_box img");
// 2. 绑定事件
this.addEvent();
}
Magnifier.prototype.addEvent = function(){
var that = this;
// 进入事件
this.sBox.onmouseover = function(){
// 3. 显示
that.show()
}
// 离开事件
this.sBox.onmouseout = function(){
// 4. 隐藏
that.hide();
}
// 移动事件
this.sBox.onmousemove = function(eve){
var e = eve || window.event;
// 5. 跟随移动功能，计算比例，设置位置
that.move(e);
}
}
Magnifier.prototype.show = function(){
// 显示
this.span.style.display = "block";
this.bBox.style.display = "block";
this.span.style.width = (this.bBox.offsetWidth / this.bImg.offsetWidth) * this.sBox.offsetWidth + "px";
this.span.style.height = (this.bBox.offsetHeight / this.bImg.offsetHeight) * this.sBox.offsetHeight + "px";
// 提前获取各种尺寸，方便使用
this.sBoxW = this.sBox.offsetWidth;
this.sBoxH = this.sBox.offsetHeight;
this.sBoxL = this.sBox.offsetLeft;
this.sBoxT = this.sBox.offsetTop;
this.spanW = this.span.offsetWidth;
this.spanH = this.span.offsetHeight;
this.bBoxW = this.bBox.offsetWidth;
this.bBoxH = this.bBox.offsetHeight;
this.bImgW = this.bImg.offsetWidth;
this.bImgH = this.bImg.offsetHeight;
}
Magnifier.prototype.hide = function(){
// 隐藏
this.span.style.display = "none";
this.bBox.style.display = "none";
}
Magnifier.prototype.move = function(e){
// 计算要移动的距离
var l = e.clientX - this.sBoxL - this.spanW/2;
var t = e.clientY - this.sBoxT - this.spanH/2;
// 边界限定
if(l<0) l=0;
if(t<0) t=0;
if(l>this.sBoxW-this.spanW) l=this.sBoxW-this.spanW;
if(t>this.sBoxH-this.spanH) t=this.sBoxH-this.spanH;
console.log(t)
// 移动
this.span.style.left = l + "px";
this.span.style.top = t + "px";
// 计算比例
var x = l / (this.sBoxW-this.spanW);
var y = t / (this.sBoxH-this.spanH);
// 设置给右侧图片的位置
this.bImg.style.left = x * -Math.abs(this.bImgW - this.bBoxW) + "px";
this.bImg.style.top = y * -Math.abs(this.bImgH - this.bBoxH) + "px";
}
new Magnifier;
</script>
</html>