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

Javascript 相关文章推荐
JavaScript获取网页中第一个链接ID的方法
Apr 03 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
Aug 13 Javascript
移动开发之自适应手机屏幕宽度
Nov 23 Javascript
深入理解ES7的async/await的用法
Sep 09 Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
Dec 18 Javascript
解决vue2中使用axios http请求出现的问题
Mar 05 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
May 06 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 Javascript
vue 父组件中调用子组件函数的方法
Jun 06 Javascript
通过JS深度判断两个对象字段相同
Jun 14 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
解决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
You might like
php生成二维码的几种方式整理及使用实例
2013/06/03 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
新浪中用来显示flash的函数
2007/04/02 Javascript
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
js 通用订单代码
2013/12/23 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
2015/04/26 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
BootStrap按钮标签及基本样式
2016/11/23 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
layui实现动态和静态分页
2018/04/28 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
django框架如何集成celery进行开发
2017/05/24 Python
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
Python读取word文本操作详解
2018/01/22 Python
Python实现DDos攻击实例详解
2019/02/02 Python
Django接收自定义http header过程详解
2019/08/23 Python
Python谱减法语音降噪实例
2019/12/18 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
大学四年规划书范文
2013/12/27 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
小学推普周活动总结
2015/05/07 职场文书
十月围城观后感
2015/06/08 职场文书
军训结束新闻稿
2015/07/17 职场文书
详解Python requests模块
2021/06/21 Python