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. 鼠標移動的時候，讓黃色的盒子跟着鼠標來走
preview_img.addEventListener(‘mousemove’, function(e) {
// (1). 先計算出鼠標在盒子內的座標
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 maskX = x - mask.offsetWidth / 2;
var maskY = y - mask.offsetHeight / 2;
// (4) 如果x 座標小於了0 就讓他停在0 的位置
// 遮擋層的最大移動距離
var maskMax = preview_img.offsetWidth - mask.offsetWidth;
if (maskX <= 0) {
maskX = 0;
} else if (maskX >= maskMax) {
maskX = maskMax;
}
if (maskY <= 0) {
maskY = 0;
} else if (maskY >= maskMax) {
maskY = maskMax;
}
mask.style.left = maskX + ‘px’;
mask.style.top = maskY + ‘px’;
// 3. 大圖片的移動距離 = 遮擋層移動距離 * 大圖片最大移動距離 / 遮擋層的最大移動距離
// 大圖
var bigIMg = document.querySelector(’.bigImg’);
// 大圖片最大移動距離
var bigMax = bigIMg.offsetWidth - big.offsetWidth;
// 大圖片的移動距離 X Y
var bigX = maskX * bigMax / maskMax;
var bigY = maskY * bigMax / maskMax;
bigIMg.style.left = -bigX + ‘px’;
bigIMg.style.top = -bigY + ‘px’;
})
})