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设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
JS模式之单例模式基本用法
Jun 30 Javascript
js实现表单多按钮提交action的处理方法
Oct 24 Javascript
基于AngularJS+HTML+Groovy实现登录功能
Feb 17 Javascript
JS模拟简易滚动条效果代码(附demo源码)
Apr 05 Javascript
node.js操作MongoDB的实例详解
Oct 11 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
javascript实现简单打字游戏
Oct 29 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
JavaScript array常用方法代码实例详解
Sep 02 Javascript
基于JS实现操作成功之后自动跳转页面
Sep 25 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
关于document.cookie的使用javascript
2010/10/29 Javascript
JS模拟面向对象全解(一、类型及传递)
2011/07/13 Javascript
在表单提交前进行验证的几种方式整理
2013/07/31 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
2014/07/10 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
2018/02/10 Javascript
nodejs中函数的调用实例详解
2018/10/31 NodeJs
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
Python入门篇之编程习惯与特点
2014/10/17 Python
python中字典(Dictionary)用法实例详解
2015/05/30 Python
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
详解python 注释、变量、类型
2018/08/10 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
python列表list保留顺序去重的实例
2018/12/14 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
Python环境下安装PyGame和PyOpenGL的方法
2020/03/25 Python
Python 通过监听端口实现唯一脚本运行方式
2020/05/05 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
详解CSS3+JS完美实现放大镜模式
2020/12/03 HTML / CSS
教育学专业毕业生的自我评价
2013/11/21 职场文书
市场推广策划方案
2014/06/02 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书
基层工作经验证明样本
2014/11/16 职场文书
《水上飞机》教学反思
2016/02/20 职场文书
react如何快速设置文件路径别名
2021/04/28 Javascript
Python中with上下文管理协议的作用及用法
2022/03/18 Python
python使用BeautifulSoup 解析HTML
2022/04/24 Python
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers