<!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>
.s_box,.b_box{400px;height:300px;position: absolute;top:100px;}
.s_box{left:50px;}
.s_box img{ 400px;height: 300px;}
.s_box span{position: absolute;left:0;top:0;background: rgba(200,200,200,0.5);display: none}
.b_box{left:500px;display: none;overflow: hidden}
.b_box img{ 1200px;height: 900px;position: absolute;left: 0;top:0;}
</style>
</head>
<body>
<div class="s_box">
<img src="img/img1.jpg" alt="">
<span></span>
</div>
<div class="b_box">
<img src="img/img1.jpg" alt="">
</div>
</body>
<script>
// OOP:编程
function Magnifier(){
// 1.选元素
this.sBox = document.querySelector(".s_box");
this.span = document.querySelector(".s_box span");
this.bBox = document.querySelector(".b_box");
this.bImg = document.querySelector(".b_box img");
// 2.绑定事件
this.init()
}
Magnifier.prototype.init = function(){
var that = this;
// 进入
this.sBox.onmouseover = function(){
// 3-1.显示，计算span的宽高
that.show()
}
// 离开
this.sBox.onmouseout = function(){
// 3-2.隐藏
that.hide()
}
// 移动
this.sBox.onmousemove = function(eve){
var e = eve || window.event;
// 5.span跟随鼠标
that.move(e)
}
}
Magnifier.prototype.show = function(){
// 显示，计算span的宽高
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";
}
Magnifier.prototype.hide = function(){
// 隐藏
this.span.style.display = "none";
this.bBox.style.display = "none";
}
Magnifier.prototype.move = function(e){
// 计算移动的距离
var l = e.clientX - this.sBox.offsetLeft - this.span.offsetWidth/2;
var t = e.clientY - this.sBox.offsetTop - this.span.offsetHeight/2;
// 边界限定
if(l<0) l=0;
if(t<0) t=0;
if(l>this.sBox.offsetWidth - this.span.offsetWidth){
l=this.sBox.offsetWidth - this.span.offsetWidth
}
if(t>this.sBox.offsetHeight - this.span.offsetHeight){
t=this.sBox.offsetHeight - this.span.offsetHeight
}
// span跟随鼠标
this.span.style.left = l + "px";
this.span.style.top = t + "px";
// 计算比例
// 当前值 / 总值，得到的就是比例
var x = l / (this.sBox.offsetWidth - this.span.offsetWidth);
var y = t / (this.sBox.offsetHeight - this.span.offsetHeight);
// 根据比例计算右边大图应该移动的距离
// 比例 * 总值，得到的就是当前应该移动的距离
this.bImg.style.left = x * (this.bBox.offsetWidth - this.bImg.offsetWidth) + "px";
this.bImg.style.top = y * (this.bBox.offsetHeight - this.bImg.offsetHeight) + "px";
}
new Magnifier();
</script>
</html>