//案例分析
//1.黄色的遮挡层跟随鼠标功能
//2.把鼠标坐标给遮挡层不合适 因为 这当成以父盒子为准
//3.首先获得鼠标在盒子内的坐标
//4.之后把数值给遮挡层作为left和top值
//5.此时用鼠标移动事件 但还是在小图片盒子内移动
//6.发现遮挡层位置不对 需要再减去 盒子自身高度和宽度的一半
//7.遮挡层不能超出小盒子范围
//8.如果小于0 坐标设置为 0
//9.如果大于遮挡层最大移动距离 就把坐标设置为最大移动距离
//10.遮挡层最大移动距离 小图片盒子宽度 减去遮挡层盒子宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.preview_img img {
position: absolute;
top: 30px;
left: 7px;
width: 300px;
}
.bigImg {
position: absolute;
top: 0px;
left: 0px;
width: 600px;
}
.preview_img {
position: relative;
width: 300px;
height: 300px;
border: 2px solid red;
/* background-color: rgb(250, 247, 244); */
}
.mask {
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 200px;
border: 2px;
background-color: brown;
opacity: .5;
cursor: move;
}
.big {
display: none;
position: absolute;
left: 310px;
top: 0px;
width: 500px;
height: 500px;
border: 2px solid red;
z-index: 999;
}
</style>
</head>
<body>
<div class="preview_img">
<img src="data:image/jpeg;base64,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" alt="">
<div class="mask">1</div>
</div>
<div class="big">
<img src="data:image/jpeg;base64,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" alt="" class="bigImg">
</div>
<script>
//案例分析
//1.黄色的遮挡层跟随鼠标功能
//2.把鼠标坐标给遮挡层不合适 因为 这当成以父盒子为准
//3.首先获得鼠标在盒子内的坐标
//4.之后把数值给遮挡层作为left和top值
//5.此时用鼠标移动事件 但还是在小图片盒子内移动
//6.发现遮挡层位置不对 需要再减去 盒子自身高度和宽度的一半
//7.遮挡层不能超出小盒子范围
//8.如果小于0 坐标设置为 0
//9.如果大于遮挡层最大移动距离 就把坐标设置为最大移动距离
//10.遮挡层最大移动距离 小图片盒子宽度 减去遮挡层盒子宽度
window.addEventListener('load',function(){
var preview_img = document.querySelector('.preview_img');
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
// 1.当我们鼠标经过 preview_img 就显示和隐藏 mask 遮挡层和big大盒子
preview_img.addEventListener('mouseover',function(){
mask.style.display = 'block';
big.style.display = 'block';
})
preview_img.addEventListener('mouseout',function(){
mask.style.display = 'none';
big.style.display = 'none';
})
//2.鼠标移动的时候mask移动
// (1)计算鼠标在盒子内的坐标
preview_img.addEventListener('mousemove',function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// console.log(x,y);
//（2）减去盒子的高度 300的一半 150就是我们mask的最终left和top值了
//（3）我们mask的移动距离
var bigMaskX = preview_img.offsetWidth - mask.offsetWidth;
var bigMaskY= preview_img.offsetHeight - mask.offsetHeight;
maskX = x - mask.offsetWidth / 2;
maskY = y - mask.offsetHeight /2;
if( maskX <= 0 ){
maskX = 0;
}else if(maskX >= bigMaskX ){
maskX = bigMaskX;
}
if(maskY <= 0){
maskY = 0;
}else if(maskY >= bigMaskY){
maskY = bigMaskY
}
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
//大图片的移动距离 = 遮挡层的移动距离*大图片最大移动距离/遮挡层的最大移动距离
var bigImg = document.querySelector('.bigImg');
//大图片的最大移动距离
var bigmaxX = big.offsetWidth - bigImg.offsetWidth;
var bigmaxY = big.offsetHeight - bigImg.offsetHeight;
//大图片移动距离X，Y;
var bigX = maskX * bigmaxX / bigMaskX;
var bigY = maskY * bigmaxY / bigMaskY;
bigImg.style.left = -bigX + 'px';
bigImg.style.top = -bigY + 'px';
})
})
</script>
</body>
</html>
