编程 Javascript

JavaScript实现图片放大预览效果

Posted in Javascript onNovember 02, 2020

代码实现：

<!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 图片放大的资料请关注三水点靠木其它相关文章！

JavaScript实现图片放大预览效果

- Author -

火星飞鸟

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery(非HTML5)可编辑表格实现代码

Dec 11 Javascript

JQuery AJAX 中文乱码问题解决

Jun 05 Javascript

几种延迟加载JS代码的方法加快网页的访问速度

Oct 12 Javascript

javascript瀑布流式图片懒加载实例解析与优化

Feb 23 Javascript

详解JavaScript RegExp对象

Feb 04 Javascript

JS和canvas实现俄罗斯方块

Mar 14 Javascript

vue2.0实现倒计时的插件(时间戳刷新跳转都不影响)

Mar 30 Javascript

vue拦截器Vue.http.interceptors.push使用详解

Apr 22 Javascript

Vue EventBus自定义组件事件传递

Jun 25 Javascript

vue实现的双向数据绑定操作示例

Dec 04 Javascript

使用Node.js写一个代码生成器的方法步骤

May 10 Javascript

通过jQuery学习js类型判断的技巧

May 27 jQuery

解决antd 表单设置默认值initialValue后验证失效的问题

Nov 02 #Javascript

在antd4.0中Form使用initialValue操作

Nov 02 #Javascript

vue+iview使用树形控件的具体使用

Nov 02 #Javascript

在antd Form表单中select设置初始值操作

Nov 02 #Javascript

react+antd 递归实现树状目录操作

Nov 02 #Javascript

antd form表单数据回显操作

Nov 02 #Javascript

antd Select下拉菜单动态添加option里的内容操作

Nov 02 #Javascript