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 设置选中行的样式的实现代码
May 24 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
给before和after伪元素设置js效果的方法
Dec 04 Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 Javascript
vue.js学习之递归组件
Dec 13 Javascript
JavaScript数组迭代方法
Mar 03 Javascript
echart简介_动力节点Java学院整理
Aug 11 Javascript
JS与SQL方式随机生成高强度密码示例
Dec 29 Javascript
JS集合set类的实现与使用方法示例
Feb 01 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
Aug 02 Javascript
微信小程序中weui用法解析
Oct 21 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 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 函数执行效率的小比较
2010/10/17 PHP
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
PHP云打印类完整示例
2016/10/15 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
PHP 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
js实现的黑背景灰色二级导航菜单效果代码
2015/08/24 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
微信小程序 数据缓存实现方法详解
2019/08/26 Javascript
Node如何后台数据库使用增删改查功能
2019/11/21 Javascript
JS原型prototype和__proto__用法实例分析
2020/03/14 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
python利用微信公众号实现报警功能
2018/06/10 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
如何删除一个表里面的重复行
2013/07/13 面试题
怎么样写好简历中的自我评价
2013/10/25 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书
2015年招生工作总结
2015/05/04 职场文书
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android