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 相关文章推荐
jQuery计算textarea中文字数(剩余个数)的小程序
Nov 28 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
jquery实现平滑的二级下拉菜单效果
Aug 26 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
Nov 15 Javascript
js获取元素的外链样式的简单实现方法
Jun 06 Javascript
JS库之Highlight.js的用法详解
Sep 13 Javascript
vue的传参方式汇总和router使用技巧
May 22 Javascript
vue form 表单提交后刷新页面的方法
Sep 04 Javascript
js核心基础之闭包的应用实例分析
May 11 Javascript
vue Element左侧无限级菜单实现
Jun 10 Javascript
vue 中的动态传参和query传参操作
Nov 09 Javascript
Promise静态四兄弟实现示例详解
Jul 07 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
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
php上传大文件设置方法
2016/04/14 PHP
Yii2中添加全局函数的方法分析
2017/05/04 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
javascript之AJAX框架使用说明
2010/04/24 Javascript
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
js每隔5分钟执行一次ajax请求的实现方法
2013/11/27 Javascript
Windows系统下使用Sublime搭建nodejs环境
2015/04/13 NodeJs
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
weex slider实现滑动底部导航功能
2017/08/28 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
2018/03/28 Javascript
webpack4.x开发环境配置详解
2018/08/04 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
[07:09]2014DOTA2国际邀请赛-Newbee再次发威成功晋级决赛
2014/07/19 DOTA
Python内置函数Type()函数一个有趣的用法
2015/02/18 Python
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
python虚拟环境的安装配置图文教程
2017/10/20 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
Python中dict和set的用法讲解
2019/03/28 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
css3针对移动端卡顿问题的解决(动画性能优化)
2020/02/14 HTML / CSS
门卫班长岗位职责
2013/12/15 职场文书
军训自我鉴定范文
2014/02/13 职场文书
四下基层实施方案
2014/03/28 职场文书
幼儿园中班教师寄语
2014/04/03 职场文书
理财学专业自荐书
2014/06/28 职场文书
2014年财政工作总结
2014/12/10 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
初一语文教学反思
2016/03/03 职场文书