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 日期时间函数(经典+完善+实用)
May 27 Javascript
jQuery+ajax实现顶一下,踩一下效果
Jul 17 Javascript
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
javascript中局部变量和全局变量的区别详解
Feb 27 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
May 11 Javascript
让div运动起来 js实现缓动效果
Jul 06 Javascript
详解使用nvm管理多版本node的方法
Aug 30 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
VUE 全局变量的几种实现方式
Aug 22 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
Dec 06 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 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自动适应范围的分页代码
2008/08/05 PHP
过滤掉PHP数组中的重复值的实现代码
2011/07/17 PHP
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
PHP实现采集中国天气网未来7天天气
2014/10/15 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
JavaScript实现简单的数字倒计时
2015/05/15 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
Javascript实现单例模式
2016/01/24 Javascript
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
详解webpack 最简打包结果分析
2019/02/20 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
Python实现从订阅源下载图片的方法
2015/03/11 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
Python3 读、写Excel文件的操作方法
2018/10/20 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
python通过ffmgep从视频中抽帧的方法
2018/12/05 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
python判断元素是否存在的实例方法
2020/09/24 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
英国儿童图书网站:Scholastic
2017/03/26 全球购物
《悯农》教学反思
2014/04/28 职场文书
心理健康活动总结
2014/04/30 职场文书
师德师风的心得体会
2014/09/02 职场文书
大学生受助感言
2015/08/01 职场文书
大学新生入学感想
2015/08/07 职场文书
​(迎国庆)作文之我爱我的祖国
2019/09/19 职场文书
Qt自定义Plot实现曲线绘制的详细过程
2021/11/02 Python
Python捕获、播放和保存摄像头视频并提高视频清晰度和对比度
2022/04/14 Python