<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
display: block;
}
#box{
350px;
height: 350px;
border:1px solid #000;
margin: 200px;
position: relative;
}
#bgmask{
350px;
height: 350px;
opacity: .3;
background:black;
position: absolute;
left: 0;
top: 0;
}
#mask{
175.5px;
height: 175.5px;
background: pink;
opacity: 1;
position: absolute;
left: 0;
top: 0;
cursor: move;
display: none;
background:url(../../../二阶段上课代码/第三周/day13/001.jpg) no-repeat;
}
#big{
400px;
height: 400px;
border: 1px solid #000;
position: absolute;
top : 0;
left : 355px;
overflow: hidden;
display: none;
}
#bigImg{
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="box">
<div id="small">
<img src="001.jpg" alt="" id="smallImg"/>
<div id="bgmask"></div>
<div id="mask"></div>
</div>
<div id="big">
<img src="0001.jpg" alt="" id="bigImg"/>
</div>
</div>
</body>
</html>
<script src="public.js"></script>
<script type="text/javascript">
var box = $id("box"), //整个放大镜容器
small = $id("small"),//小图区
mask = $id("mask"),//遮罩
smallImg = $id("smallImg"),//小图
bigImg = $id("bigImg"), //大图
big = $id("big"); //大图显示区
//第一步：
// 鼠标移入到small时，显示mask遮罩和big大图显示区
small.onmouseover = function(){
big.style.display = "block";
mask.style.display = "block";
}
//鼠标移出small时，隐藏mask遮罩和big大图显示区
small.onmouseout = function(){
big.style.display = "none";
mask.style.display = "none";
}
//第二步：mask遮罩随鼠标移动
small.onmousemove = function( e ){
var e = e || event;
//改变left和top值，让鼠标在mask正中间
var x = e.pageX - mask.offsetWidth/2 - box.offsetLeft;
var y = e.pageY - mask.offsetHeight/2 - box.offsetTop;
//得到mask移动的最大值(小图显示区的宽高-遮罩宽高)
var maxL = small.offsetWidth-mask.offsetWidth;
var maxT = small.offsetHeight-mask.offsetHeight;
//三目运算处理边界
x = x < 0 ? 0 :( x > maxL ? maxL : x );
y = y < 0 ? 0 :( y > maxT ? maxT : y );
//mask移动范围
mask.style.left = x + "px";
mask.style.top = y + "px";
//mask背景图位置
mask.style.backgroundPosition = -x + "px -" + y +"px";
//第三步：分析大图移动的距离和比例关系
//比例关系 ： 大图的left/mask的left = (大图宽度-大图显示区宽度)/(small的宽度-mask的宽度)
//即：大图的left/mask的left = 大图宽度/小图宽度 = 大图显示区宽度/mask宽度
var bigImgLeft = x*(bigImg.offsetWidth)/(small.offsetWidth);
var bigImgTop = y*(bigImg.offsetHeight)/(small.offsetHeight);
//设置大图的移动
bigImg.style.left = -bigImgLeft + "px";
bigImg.style.top = - bigImgTop + "px";
}
</script>