效果
實現
復制粘貼，修改圖片路徑即可使用
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>商品圖片放大鏡</title></head><style>body {margin: 0;padding: 0;}#app {padding: 10px;position: relative;}/** 默認圖片*/.img-box {position: relative;left: 10px;top: 150px;width: 300px;height: 300px;text-align: center;border: 1px solid #83b4ff;border-radius: 4px;overflow: hidden;cursor: zoom-in;}.img1 {width: 100%;height: 100%;}.img-select {width: 100px;height: 100px;position: absolute;left: 0;top: 0;background: #00ff6633;border-radius: 4px;display: none;}/** 臨時放大圖片*/.img-temp-box {position: absolute;left: 0;top: 0;width: 400px;height: 400px;display: none;overflow: hidden;}.img2 {width: 200%;height: 200%;position: absolute;left: 0;top: 0;}</style><body><div id="app"><div class="img-box"><img src="image/2.jpeg" class="img1" /><div class="img-select"></div></div></div><!-- 一般放置最外邊--><div class="img-temp-box"><img src="" class="img2" /></div></body><script>/*** @author yyq* @blogger myf*/var imgBox = document.querySelector('.img-box');var imgSelect = document.querySelector('.img-select');var imgTempBox = document.querySelector('.img-temp-box');var img1 = document.querySelector('.img1');var img2 = document.querySelector('.img2');// 鼠標移入imgBox.onmouseenter = function() {imgSelect.style.display = 'block';imgTempBox.style.display = 'block';var img = getElementOffset(imgBox);imgTempBox.style.left = (img.left + 400) + "px";imgTempBox.style.top = (img.top - 50) + "px";img2.src = img1.src;console.log("移入")}// 鼠標移除imgBox.onmouseleave = function() {imgSelect.style.display = 'none';imgTempBox.style.display = 'none';console.log("移除")}// 鼠標放上imgBox.onmousemove = function() {var img = getElementOffset(imgBox);var x = event.clientX - img.left;var y = event.clientY - img.top;console.log("xy軸：", x, '-----', y);var imgSelectX = x - imgSelect.offsetWidth / 2var imgSelectY = y - imgSelect.offsetHeight / 2if(imgSelectX < 0) {imgSelectX = 0;} else if(imgSelectX > imgBox.offsetWidth - imgSelect.offsetWidth) {imgSelectX = imgBox.offsetWidth - imgSelect.offsetWidth}if(imgSelectY < 0) {imgSelectY = 0;} else if(imgSelectY > imgBox.offsetHeight - imgSelect.offsetHeight) {imgSelectY = imgBox.offsetHeight - imgSelect.offsetHeight}// 小圖里的小框imgSelect.style.left = imgSelectX + 'px';imgSelect.style.top = imgSelectY + 'px';var b = (img2.offsetHeight - imgTempBox.offsetHeight) / (imgBox.offsetHeight - imgSelect.offsetHeight)// 臨時框里的大圖片img2.style.left = -imgSelectX * b + "px"img2.style.top = -imgSelectY * b + "px"}/*** 返回元素距離瀏覽器邊框的位置（防止元素位置被父級限制）* @param {Object} element*/function getElementOffset(element) { var left = element.offsetLeft; // 當前元素左邊距var top = element.offsetTop; // 當前元素上邊距var parent = element.offsetParent; // 當前元素的父級元素while(parent !== null) { left += parent.offsetLeft; // 累加左邊距top += parent.offsetTop; // 累加上邊距parent = parent.offsetParent; // 依次獲取父元素}return {'left': left,'top': top}; }</script></html>
