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 相关文章推荐
漂亮的提示信息(带箭头)
Mar 21 Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
Oct 25 Javascript
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
解析使用JS 清空File控件的路径值
Jul 08 Javascript
jquery批量设置属性readonly和disabled的方法
Jan 24 Javascript
JavaScript基于ajax编辑信息用法实例
Jul 15 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
关于JavaScript中forEach和each用法浅析
Jul 27 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
微信小程序实现单列下拉菜单效果
Apr 25 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
May 10 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 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中文件上传的安全问题
2006/10/09 PHP
PHP stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
PHP中数组合并的两种方法及区别介绍
2012/09/14 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
php提交post数组参数实例分析
2015/12/17 PHP
PHP中FTP相关函数小结
2016/07/15 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
PHP分享图片的生成方法
2018/04/25 PHP
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
javascript中声明函数的方法及调用函数的返回值
2014/07/22 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
2015/08/19 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
2017/10/13 Javascript
详解JSON Web Token 入门教程
2018/07/30 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
使用python接入微信聊天机器人
2020/03/31 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
matplotlib jupyter notebook 图像可视化 plt show操作
2020/04/24 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
2018/11/05 HTML / CSS
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
创先争优个人承诺书
2014/08/30 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
人身损害赔偿协议书格式
2014/11/01 职场文书
班主任2015新年寄语
2014/12/08 职场文书
骨干教师个人总结
2015/02/11 职场文书
2015大学迎新晚会策划书
2015/07/16 职场文书
决心书格式范文
2015/09/23 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
如何用RabbitMQ和Swoole实现一个异步任务系统
2021/05/29 PHP
Python获取字典中某个key的value
2022/04/13 Python