需要一个图片最好是方形 注意因为要计算比例所以要设置好宽高 以便于计算比例
直接上代码
<!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>
/*一些css样式设置小图片的大小和大图片的大小及框的大小 最好设置成比例------------------------------*/
.sbox,.bbox{width: 300px;height: 300px;;position: absolute;}
.sbox{left: 50px;}
.sbox img{width: 300px;height:300px;}
span{background: rgba(200, 200, 200, 0.3);position: absolute;left: 0;top: 0;display: none;}
.bbox{left: 500px;display: none;overflow: hidden;}
.bbox img{width: 1200px;height: 1200px;position: absolute;left: 0;top: 0;}
</style>
</head>
<body>
<!--设置一个div里有图片和需要移动的放大镜 用span代替-->
<div class="sbox">
<img src="../img/15.jpg" alt="">
<span></span>
</div>
<!--设置大盒子和图片-->
<div class="bbox">
<img src="../img/15.jpg" alt="">
</div>
</body>
<script>
//使用面向对象编程
//首先获取元素
function Magnifier(){
this.sbox = document.querySelector(".sbox");
this.bbox = document.querySelector(".bbox");
this.span = document.querySelector(".sbox span");
this.bimg = document.querySelector(".bbox img");
//绑定事件触发效果
this.init();
}
Magnifier.prototype.init = function(){
//因为在函数内部拿不到当前的this所以先声明变量来保存this
var that = this;
// 进入小图片时触发
this.sbox.onmouseover = function(){
//这个时候使用保存的this可以拿到
//鼠标进入小框执行
that.display();
}
// 小图片上鼠标移动移动
this.sbox.onmousemove = function(eve){
//设置兼容问题
var e = eve || window.event;
//移动时执行Tmove
that.Tmove(e);
}
// 离开小图片时执行
this.sbox.onmouseout = function(){
that.hide();
}
}
//显示span（放大镜）
Magnifier.prototype.display = function(){
//进入小框让span和大框出现
this.span.style.display = "block";
this.bbox.style.display = "block";
//计算span的宽高 大盒子实际宽高比上大图片的实际宽高乘以小盒子的实际宽高（就是比例的计算）
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";
}
//span跟随鼠标移动
Magnifier.prototype.Tmove = function(e){
//计算span移动坐标 鼠标相当于事件源实际坐标 - 小盒子的实际坐标 -span的实际宽高/2（让鼠标位置在span中心 效果好看一点）
var l = e.clientX - this.sbox.offsetLeft - this.span.offsetWidth/2;
var t = e.clientY - this.sbox.offsetTop - this.span.offsetHeight/2 ;
//给鼠标设置边界 就是span不能移动到盒子外面
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";
//声明变量计算比例来求出大图片的实际跟随span移动的位置
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";
}
//鼠标离开小盒子时隐藏span和大框不显示
Magnifier.prototype.hide = function(){
this.span.style.display = "none";
this.bbox.style.display = "none";
}
new Magnifier();
</script>
</html>
