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插件 tabBox实现代码
Feb 09 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
Feb 16 Javascript
二叉树先序遍历的非递归算法具体实现
Jan 09 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
Aug 06 Javascript
jQuery图片渐变特效的简单实现
Jun 25 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
Aug 05 Javascript
AngularJS中isolate scope的用法分析
Nov 22 Javascript
浅谈angularjs中响应回车事件
Apr 24 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 Javascript
element上传组件循环引用及简单时间倒计时的实现
Oct 01 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
Dec 06 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中的类型约束介绍
2015/05/11 PHP
PHP经典实用正则表达式小结
2017/05/04 PHP
jQuery get和post 方法传值注意事项
2009/11/03 Javascript
JSON 学习之JSON in JavaScript详细使用说明
2010/02/23 Javascript
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
详解nodejs 文本操作模块-fs模块(五)
2016/12/23 NodeJs
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
vue使用Google地图的实现示例代码
2018/12/19 Javascript
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
基于Django的ModelForm组件(详解)
2017/12/07 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
DataFrame:通过SparkSql将scala类转为DataFrame的方法
2019/01/29 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
python os模块在系统管理中的应用
2020/06/22 Python
如何用Anaconda搭建虚拟环境并创建Django项目
2020/08/02 Python
美国猫狗药物和用品网站:PetCareRx
2017/01/05 全球购物
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
JBL英国官网:JBL UK
2018/07/04 全球购物
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
正隆泰信息技术有限公司上机题
2012/06/14 面试题
供货协议书范本
2014/04/22 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python
vue动态绑定style样式
2022/04/20 Vue.js