JavaScript实现图片放大预览效果

时间：2021-05-26

代码实现：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .preview-img { position: relative; height: 398px; } .mask { display: none; position: absolute; top: 0; left: 0; width: 300px; height: 300px; background-color: skyblue; opacity: .4; border: 1px solid #ccc; cursor: move; } .big { overflow: hidden; display: none; position: absolute; top: 0; left: 410px; width: 500px; height: 500px; background-color: pink; z-index: 99; border: 1px solid #ccc; } .big img { position: absolute; top: 0; left: 0; } </style></head><body> <script> window.addEventListener('load', function() { var preview_img = document.querySelector('.preview-img'); var mask = document.querySelector('.mask'); var big = document.querySelector('.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'; }); // 盒子跟随鼠标移动 preview_img.addEventListener('mousemove', function(e) { var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; var maskX = x - mask.offsetWidth / 2; var maskY = y - mask.offsetHeight / 2; var maskMax = preview_img.offsetHeight - mask.offsetHeight; 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'; // 大图，根据比例计算坐标 var bigImg = document.querySelector('.bigImg'); var bigMax = bigImg.offsetWidth - big.offsetWidth; var bigX = bigMax * maskX / maskMax; var bigY = bigMax * maskY / maskMax; bigImg.style.left = -bigX + 'px'; bigImg.style.top = -bigY + 'px'; }); }); </script> <div class="preview-img"> <img src="https://s1.ax1x.com/2020/10/12/027yRg.jpg" alt=""> <div class="mask"></div> <div class="big"> <img src="https://s1.ax1x.com/2020/10/12/0276zQ.jpg" alt="" class="bigImg"> </div> </div></body></html>

实现效果：

以上就是JavaScript实现图片放大预览效果的详细内容，更多关于JavaScript 图片放大的资料请关注其它相关文章！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章