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

【javascript|仿京东放大镜效果源码分享】看似图片是被放大了的效果，实则是一张大图实现移动，左图最小放在图片展示列表里，右侧图片最大用于展示放大镜效果

Title - 锐客网#small { width: 130px; height: 130px; float: left; margin: 100px; position: relative; } #small img{ width: 100%; height: 100%; }#moveBox { width: 60px; height: 40px; background: rgba(255, 0, 0, 0.2); position: absolute; top: 0; cursor: all-scroll; display: none; }/*130/60 == 800/?*/ #big { width: 369px; height: 246px; border: 1px solid blue; overflow: hidden; position: relative; top: 100px; display: none; }#big img { position: absolute; } 文章图片文章图片

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" }) })