放大镜效果.png
实现思路：主要分为三大块，展示图片、蒙版、放大的图片，鼠标进入时候图片时候显示蒙版和放大的图片区域
1、首先限制蒙版的 left 、top
2、在右边放大的框下面超出隐藏一张大图片，蒙版移动时候大图片按照（move移动的距离/move能够移动的最大距离 = 大图片移动的距离/大图片能够移动的距离）的比例进行移动，不过注意此时大图片是相对反方向移动的，所以在大图片移动时候切记加上负号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style>
#small{
width: 300px;
height: 300px;
float: left;
margin: 50px;
position: relative;
cursor: move;
}
#move{
width: 100px;
height: 100px;
background: rgba(255,255,0,.5);
position: absolute;
left: 0;
top: 0;
display: none;
}
#small_img{
width: 300px;
height: 300px;
}
#big{
float: left;
width: 400px;
height: 400px;
overflow: hidden;
display: none;
position: relative;
}
#big_img{
width: 1000px;
height: 1000px;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="box">
<div id="small">
<img id="small_img" src="./img/2.jpg" alt="">
<div id="move"></div>
</div>
<div id="big">
<img id="big_img" src="./img/2.jpg" alt="">
</div>
<script>
var oSmall = document.getElementById("small");
var oMove = document.getElementById("move");
var oBig = document.getElementById("big");
var oBig_img = document.getElementById("big_img");
oSmall.onmouseenter = function () {
oMove.style.display = "block";
oBig.style.display = "block";
var pointMove = {
left:0,
top:0
}
oSmall.onmousemove = function(ev){
var ev = ev ||window.event;
//当鼠标移入开始移动的时候 计算move 的定位信息
//移动的值是 鼠标的距离-samll距离浏览器边缘的距离 - move自身一半的距离
pointMove.left = ev.clientX - oSmall.offsetLeft - oMove.offsetWidth/2;
pointMove.top = ev.clientY - oSmall.offsetTop - oMove.offsetHeight/2;
// 判断临界值
if(pointMove.left <= 0){
pointMove.left =0;
}else if(pointMove.left >= oSmall.clientWidth - oMove.offsetWidth){
pointMove.left = oSmall.clientWidth - oMove.offsetWidth;
}
if(pointMove.top <= 0){
pointMove.top =0;
}else if(pointMove.top >= oSmall.clientHeight - oMove.offsetHeight){
pointMove.top = oSmall.clientHeight - oMove.offsetHeight;
}
//对move块进行赋值操作
oMove.style.left = pointMove.left +"px";
oMove.style.top = pointMove.top +"px";
// 比例计算：
// move移动的距离/move能够移动的最大距离 = 大图片移动的距离/大图片能够移动的距离
var scaleX = pointMove.left / (oSmall.clientWidth - oMove.offsetWidth);
var scaleY = pointMove.top / (oSmall.clientHeight - oMove.offsetHeight);
// 计算大图应该向移动的距离
oBig_img.style.left = - scaleX * (oBig_img.offsetWidth - oBig.clientWidth) + "px";
oBig_img.style.top = - scaleY * (oBig_img.offsetHeight - oBig.clientHeight) + "px";
}
}
oSmall.onmouseleave = function () {
oMove.style.display = "none";
oBig.style.display = "none";
}
</script>
</div>
</body>
</html>
