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 相关文章推荐
javascript入门基础之私有变量
Feb 23 Javascript
用jQuery中的ajax分页实现代码
Sep 20 Javascript
js constructor的实际作用分析
Nov 15 Javascript
jQuery实现表头固定效果的实例代码
May 24 Javascript
JavaScript使用循环和分割来替换和删除元素实例
Oct 13 Javascript
node.js中的fs.futimes方法使用说明
Dec 17 Javascript
jQuery动态星级评分效果实现方法
Aug 06 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
Jun 12 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
Jun 14 Javascript
使用koa2创建web项目的方法步骤
Mar 12 Javascript
详解JavaScript匿名函数和闭包
Jul 10 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之第四天
2006/10/09 PHP
php中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
PHP转盘抽奖接口实例
2015/02/09 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
thinkPHP内置字符串截取函数用法详解
2016/11/15 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
javascript iframe内的函数调用实现方法
2009/07/19 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
React Native之ListView实现九宫格效果的示例
2017/08/02 Javascript
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
taro开发微信小程序的实践
2019/05/21 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
前台接待的工作职责
2013/11/21 职场文书
大学生第一学年自我鉴定2015
2014/09/28 职场文书
中标通知书范本
2015/04/17 职场文书
城南旧事观后感
2015/06/11 职场文书
2016年法制宣传月活动总结
2016/04/01 职场文书
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB
Nginx配置Https安全认证的实现
2021/05/26 Servers
MySQL不使用order by实现排名的三种思路总结
2021/06/02 MySQL