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工具 Cookie 封装
Aug 21 Javascript
javascript函数以及基础写法100多条实用整理
Jan 13 Javascript
js判断移动端是否安装某款app的多种方法
Dec 18 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
Jun 17 Javascript
JS+CSS3实现超炫的散列画廊特效
Jul 16 Javascript
微信小程序 教程之事件
Oct 18 Javascript
js获取css的各种样式并且设置他们的方法
Aug 22 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
vue如何进行动画的封装
Sep 26 Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
Jul 15 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 高性能书写
2010/12/11 PHP
PHP高手需要要掌握的知识点
2014/08/21 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
Laravel使用Queue队列的技巧汇总
2019/09/02 PHP
JavaScript语言中的Literal Syntax特性分析
2007/03/08 Javascript
JavaScript 动态改变图片大小
2009/06/11 Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
jquery Tab效果和动态加载的简单实例
2013/12/11 Javascript
js对象转json数组的简单实现案例
2014/02/28 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
jQuery图片轮播实现并封装(一)
2016/12/03 Javascript
C#微信小程序服务端获取用户解密信息实例代码
2017/03/10 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
2017/06/25 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
详解JSON.stringify()的5个秘密特性
2020/05/26 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
2020/06/02 Javascript
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
[00:06]Yes,it worked!小卡尔成功穿越时空加入战场!
2019/07/20 DOTA
python 队列详解及实例代码
2016/10/18 Python
Python正则抓取网易新闻的方法示例
2017/04/21 Python
如何使用Python的Requests包实现模拟登陆
2018/04/27 Python
python实现简单http服务器功能
2018/09/17 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
Python中Qslider控件实操详解
2021/02/20 Python
移动通信行业实习自我鉴定
2013/09/28 职场文书
本科毕业生的求职信范文
2013/11/20 职场文书
模特职业生涯规划范文
2014/02/26 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
青年岗位能手事迹材料(2016推荐版)
2016/03/01 职场文书