// 取大图标签的节点
var maxImg = imgContainer.querySelector('.J_maxImg');

// 给该节点的src属性赋值为大图的url
maxImg.src = imgUrl;

// 取大图所在的容器
var maxImgContainer = imgContainer.querySelector('.J_imgMax');

// 取遮罩块
var glassBlock = imgContainer.querySelector('.J_glass');

// 取消放大镜效果
var hideMaxImg = function(){
glassBlock.style.top = '-9999px';
glassBlock.style.left = '-9999px';
maxImgContainer.style.display = 'none';
}

// 鼠标移出图片区域，取消放大镜效果
imgContainer.onmouseout = function(event){
event.stopPropagation();
hideMaxImg();
};

// 鼠标在图片区域内移动事件
imgContainer.onmousemove = function(event) {
event.stopPropagation();

// 取图片容器的大小及其相对于视口的位置，需要实时取，所以放在move事件里
var clientRect = event.currentTarget.getBoundingClientRect();

// 获取距鼠标距的上和左的坐标
var leftX = event.clientX - clientRect.left;
var leftY = event.clientY - clientRect.top;

// 动态设置遮罩块的left和top位置 这里需要减去遮罩层的一半，因为鼠标位于遮罩块中心点
var pointerLeft = leftX - 25;
var pointerTop = leftY - 25;

// 如果鼠标坐标移动超出原始图片区域边缘 则取消放大镜效果 因为这里存在快速移动鼠标到大图区域时，鼠标仍处在外层的图片区域内，并不会触发mouseout事件(虽然中间隔了小小的间距，但是快速移动仍能产生这个bug,如代码下面的图所示)
if((pointerLeft+25) > clientRect.width || pointerLeft < 0 - 25 || (pointerTop+25) > clientRect.height || pointerTop < 0 - 25){
hideMaxImg();
return !1;
};

// 遮罩块在最左边的时候，鼠标仍在图片区域内，可在遮罩块左边缘至中心线区域内移动，且这时遮罩块为距左0像素
if(pointerLeft < 0){
pointerLeft = 0;
};

// 同上 右边限制
if(pointerLeft > clientRect.width - 50){
pointerLeft = clientRect.width - 50;
};

// 同上 顶部限制
if(pointerTop < 0){
pointerTop = 0;
};

// 同上 底部限制
if(pointerTop > clientRect.height - 50){
pointerTop = clientRect.height - 50;
};

// 设置遮罩块的位置
glassBlock.style.left = pointerLeft;
glassBlock.style.top = pointerTop;

// 取遮罩快距离左边的位置和图片区域的宽高比，用于计算大图偏移距离，展示遮罩块所对应的图片区域
var percentLeft = pointerLeft/clientRect.width;
var percentHeight = pointerTop/clientRect.height;

// 设置大图偏移距离 因为其父元素存在 overflow:hidden 所以只会展示对应区块
maxImg.style.left = -(percentLeftmaxImg.clientWidth)+'px';
maxImg.style.top = -(percentHeightmaxImg.clientHeight)+'px';
};
}

var elem = document.querySelectorAll('.J_imgBox');

elem.forEach(function(item,idx){
imgZoom(item)
})
})()