欢迎光临
我的个人博客网站

JavaScript图片放大预览效果


代码实现:

<!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图片放大预览效果

赞(0) 打赏
未经允许不得转载:张拓的天空 » JavaScript图片放大预览效果
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏