仿京东放大镜效果源码分享

看似图片是被放大了的效果，实则是一张大图实现移动，左图最小放在图片展示列表里，右侧图片最大用于展示放大镜效果

window.addEventListener("load", function() {
	var small = document.querySelector("#small")
	var move = document.querySelector("#moveBox")
	var big = document.querySelector("#big")
	// 鼠标移小盒子显示放大区域
	small.addEventListener("mouseenter", function() {
		move.style.display = "block"
		big.style.display = "block"
	})
	// 鼠标移小盒子显示放大区域
	small.addEventListener("mouseleave", function() {
		move.style.display = "none"
		big.style.display = "none"
	})
	// 给小盒子添加鼠标移动事件
	small.addEventListener("mousemove", function(e) {
		// 计算鼠标进入小盒子的位置
		var X = e.pageX - this.offsetLeft;
		var Y = e.pageY - this.offsetTop;
		// console.log(X, Y);
		// 声明变量计算小盒子在small里XY轴的移动距离
		var moveX = X - move.offsetWidth / 2
		var moveY = Y - move.offsetHeight / 2
		// 计算move的最大移动距离
		var moveMax = small.offsetWidth - move.offsetWidth
		// 判断move盒子的left以及top值，限制移动区域在small内
		if (moveX <= 0) {
			moveX = 0;
		} else if (moveX >= moveMax) {
			moveX = moveMax
		}
		if (moveY <= 0) {
			moveY = 0;
		} else if (moveY >= moveMax) {
			moveY = moveMax + 20
		}
		// 让move跟随鼠标移动// 把鼠标定位进要移动区域盒子中心
		move.style.left = moveX + "px"
		move.style.top = moveY + "px"
		// 获取大盒子内的图片
		var bigImg = big.querySelector("#img");
		// 计算大图片最大移动距离 
		// 大图片最大移动距离=大盒子的宽度-大图片的宽度
		var bigImgMax = big.offsetWidth - bigImg.offsetWidth;
		// 大图片移动距离 = 大图片最大移动距离 * 小盒子移动距离 / 小盒子最大移动距离
		// 声明新变量接收大图片在XY轴的移动距离
		var bigMoveX = bigImgMax * moveX / moveMax
		var bigMoveY = bigImgMax * moveY / moveMax
		// 把计算出来的XY轴的移动距离赋值给大图片的left top值
		bigImg.style.left = bigMoveX + "px"
		bigImg.style.top = bigMoveY + "px"
	})
})