JavaScript实现放大镜效果代码示例


Posted in Javascript onApril 29, 2020

JavaScript实现放大镜效果:

<!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>
    .smallBgImg {
      width: 350px;
      height: 350px;
      border: 1px solid #ccc;
      box-sizing: border-box;
      background-clip: padding-box;
      float: left;
      position: relative;
      cursor: pointer;
    }

    .move {
      border: 1px solid #ccc;
      box-sizing: border-box;
      background: rgba(165, 201, 66, 0.5);
      position: absolute;
      left: 0;
      top: 0;
    }

    .bigBgImg {
      width: 540px;
      height: 540px;
      border: 1px solid #ccc;
      box-sizing: border-box;
      background-clip: padding-box;
      float: left;
      margin-left: 10px;
    }

    .hidden {
      display: none;
    }
  </style>
</head>

<body>
  <div class="smallBgImg">
    <div class="move hidden">

    </div>
  </div>
  <div class="bigBgImg hidden">

  </div>
  <script>
    (function () {
      //基本信息配置
      var config = {
        smallImg: "./image/smallImg.jpg", //小图路径
        smallDom: document.getElementsByClassName("smallBgImg")[0], //小图 dom对象
        bigImg: "./image/bigImg.jpg", //大图路径
        bigDom: document.getElementsByClassName("bigBgImg")[0], //大图 dom对象
        moveDom: document.getElementsByClassName("move")[0], //移动方块的dom对象
        smallSize: { //小图尺寸
          width: 350,
          height: 350
        },
        bigSize: { //大图尺寸
          width: 800,
          height: 800
        },
        divBigSize: { //大图框的尺寸
          width: 540,
          height: 540
        }
      };
      //根据比例尺计算移动框的宽高 移动框/小图尺寸 = 大框尺寸/大图尺寸
      config.moveSize = {
        width: config.divBigSize.width * config.smallSize.width / config.bigSize.width,
        height: config.divBigSize.height * config.smallSize.height / config.bigSize.height
      };
      //小图style的计算值
      config.smallComputedStyle = window.getComputedStyle(config.smallDom);
      //大图style的计算值
      config.bigComputedStyle = window.getComputedStyle(config.bigDom);
      //移动方块style的计算值
      config.moveComputedStyle = window.getComputedStyle(config.moveDom);

      initSmallImg();
      initBigImg();
      initMoveDiv();

      //初始化小图
      function initSmallImg() {
        config.smallDom.style.background = `url("${config.smallImg}") no-repeat left top/contain`; //设置背景图片
        config.smallDom.onmousemove = function (e) { //鼠标移入事件
          //展示移动小块
          config.moveDom.style.display = "block";
          var move = window.getComputedStyle(config.moveDom);
          //获取鼠标在小图中的坐标
          var position = getPosition(e);
          //设置移动框的位置
          setPosition(position);

          //展示大图框
          config.bigDom.style.display = "block";
          //大图框中展示部分大图
          displayBigBgImgSize();
        }

        config.smallDom.onmouseout = function () {
          //移动小块隐藏,大图隐藏
          config.moveDom.style.display = config.bigDom.style.display = "none";
        }
      }

      //初始化大图
      function initBigImg() {
        config.bigDom.style.background = `url("${config.bigImg}") no-repeat`; //设置背景图片
      }

      //初始化移动框
      function initMoveDiv() {
        config.moveDom.style.width = config.moveSize.width + "px";
        config.moveDom.style.height = config.moveSize.height + "px";
      }

      //获取鼠标的坐标位置
      function getPosition(e) {
        if (e.target == config.smallDom) { //若鼠标出现在小图中,事件源是小图
          return { //直接获取鼠标距离事件源的横坐标和纵坐标
            x: e.offsetX,
            y: e.offsetY
          };
        } else { //鼠标出现在移动框中,事件源是移动框
          return {
            x: e.offsetX + parseFloat(config.moveComputedStyle.left) +
              1, //鼠标距离事件源的横坐标 + 事件源在smallDom中的left值 + 边框值
            y: e.offsetY + parseFloat(config.moveComputedStyle.top) +
//鼠标距离事件源的纵坐标 + 事件源在smallDom中的top值 + 边框值
          }
        }
      }

      //设置移动方块的位置
      function setPosition(position) {
        //鼠标要始终在移动方块中央位置
        config.moveDom.style.left = position.x - parseFloat(config.moveComputedStyle.width) / 2 + "px";
        config.moveDom.style.top = position.y - parseFloat(config.moveComputedStyle.height) / 2 + "px";

        //要限制移动框的范围在小图中,否则会超出小图
        var left = parseInt(config.moveComputedStyle.left);
        var top = parseInt(config.moveComputedStyle.top);
        if (left < 0) { //最左
          config.moveDom.style.left = "0px";
        }
        if (left > config.smallSize.width - config.moveSize.width) { //最右
          config.moveDom.style.left = config.smallSize.width - config.moveSize.width + "px";
        }
        if (top < 0) { //最上
          config.moveDom.style.top = "0px";
        }
        if (top > config.smallSize.height - config.moveSize.height) { //最下
          config.moveDom.style.top = config.smallSize.height - config.moveSize.height + "px";
        }
      }

      //展示部分大图
      function displayBigBgImgSize() {

        //移动框的left/小图width = 大图框的left/大图width
        var moveLeft = parseInt(config.moveComputedStyle.left);
        var moveTop = parseInt(config.moveComputedStyle.top);
        config.bigDom.style.backgroundPosition =
          `-${moveLeft*config.bigSize.width/config.smallSize.width}px -${moveTop*config.bigSize.height/config.smallSize.height}px`;
      }
    }());
  </script>
</body>

</html>

index.html

效果展示:

JavaScript实现放大镜效果代码示例

代码中的大图片和小图片要自己找,并且替换掉代码中的图片路径。

做放大镜效果做重要的一点是,要找到黄色移动块、小图、部分大图、大图,这四个之间的比例尺

黄色移动块 /小图 = 部分大图 / 大图

JavaScript实现放大镜效果代码示例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js Event对象的5种坐标
Sep 12 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
Apr 15 Javascript
extjs render 用法介绍
Sep 11 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
jQuery实现鼠标点击弹出渐变层的方法
Jul 09 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
Vue实现简易翻页效果源码分享
Nov 08 Javascript
vue路由缓存的几种实现方式小结
Feb 02 Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 #Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
Apr 29 #Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
Apr 29 #Javascript
JS实现手写 forEach算法示例
Apr 29 #Javascript
Node.js API详解之 querystring用法实例分析
Apr 29 #Javascript
Node.js API详解之 string_decoder用法实例分析
Apr 29 #Javascript
深入浅析vue全局环境变量和模式
Apr 28 #Javascript
You might like
php学习 函数 课件
2008/06/15 PHP
PHP实现AES256加密算法实例
2014/09/22 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
PHP内存缓存功能memcached示例
2016/10/19 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
Javascript call和apply区别及使用方法
2013/11/14 Javascript
js select option对象小结
2013/12/20 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
2015/08/17 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
2017/06/04 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
2017/10/20 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
vue路由懒加载的实现方法
2018/03/12 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
Python实现打印螺旋矩阵功能的方法
2017/11/21 Python
python数字图像处理之高级滤波代码详解
2017/11/23 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
对python for 文件指定行读写操作详解
2018/12/29 Python
Python 占位符的使用方法详解
2019/07/10 Python
Python如何实现强制数据类型转换
2019/11/22 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
matplotlib 三维图表绘制方法简介
2020/09/20 Python
Python3压缩和解压缩实现代码
2021/03/01 Python
金融行业务员的自我评价
2013/12/13 职场文书
期中考试反思800字
2014/05/01 职场文书
创新社会管理心得体会
2014/09/12 职场文书
户籍证明格式
2014/09/15 职场文书
医生辞职信范文
2015/03/02 职场文书
2015年小学生暑假总结
2015/07/13 职场文书
关于职业道德的心得体会
2016/01/18 职场文书