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 相关文章推荐
JS在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
页面定时刷新(1秒刷新一次)
Nov 22 Javascript
js中文逗号转英文实现
Feb 11 Javascript
jQuery学习笔记之2个小技巧
Jan 19 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
May 10 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 Javascript
快速入门Vue
Dec 19 Javascript
浅析Vue中method与computed的区别
Mar 06 Javascript
vue-cli3中vue.config.js配置教程详解
May 29 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 Javascript
JS如何实现手机端输入验证码效果
May 13 Javascript
vue 如何使用递归组件
Oct 23 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学习笔记 类的声明与对象实例化
2011/06/13 PHP
php使用百度天气接口示例
2014/04/22 PHP
PHP中执行cmd命令的方法
2014/10/11 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
php读取der格式证书乱码解决方法
2015/06/22 PHP
srcElement表格样式
2006/09/03 Javascript
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
用JavaScript修改CSS属性的代码
2013/05/06 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
js获取ajax返回值代码
2014/04/30 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
2017/01/19 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
vue slot与传参实例代码讲解
2019/04/28 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
python 3.5下xadmin的使用及修复源码bug
2017/05/10 Python
Python实现注册、登录小程序功能
2018/09/21 Python
对python实现合并两个排序链表的方法详解
2019/01/23 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
Melissa鞋英国官方网站:Nonnon
2019/05/01 全球购物
strstr()的简单实现
2013/09/26 面试题
宪法宣传周工作方案
2014/05/26 职场文书
工地安全质量标语
2014/06/07 职场文书
明星员工获奖感言
2014/08/14 职场文书
2014年师德师风工作总结
2014/11/25 职场文书
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python