纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

JavaScript实现放大镜 JavaScript实现放大镜详细

Onion韩   2021-12-02 我要评论
想了解JavaScript实现放大镜详细的相关内容吗Onion韩在本文为您仔细讲解JavaScript实现放大镜的相关知识和一些Code实例欢迎阅读和指正我们先划重点:JavaScript实现放大镜,JavaScript放大镜,JavaScript下面大家一起来学习吧。

1、效果图

2、实现原理

借助宽高等比例放大的两张图片结合js中鼠标偏移量、元素偏移量、元素自身宽高等属性完成;左侧遮罩移动Xpx,右侧大图移动X*倍数px;其余部分就是用小学数学算一下就OK了。

HTML和CSS

 <divclass="wrap">
    <!-- 小图与遮罩 -->
    <div id="small">
      <img src="img/1.jpg" alt="" >
      <div id="mark"></div>
    </div>
    <!-- 等比例放大的大图 -->
    <div id="big">
      <img src="img/2.jpg" alt="" id="bigimg">
    </div>
  </div>
 * {
      margin: 0;
      padding: 0;
    }
    .wrap {
      width: 1500px;
      margin: 100px auto;
    }

    #small {
      width: 432px;
      height: 768px;
      float: left;
      position: relative;
    }

    #big {
      /* background-color: seagreen; */
      width: 768px;
      height: 768px;
      float: left;
      /* 超出取景框的部分隐藏 */
      overflow: hidden;
      margin-left: 20px;
      position: relative;
      display: none;
    }

    #bigimg {
      /* width: 864px; */
      position: absolute;
      left: 0;
      top: 0;
    }

    #mark {
      width: 220px;
      height: 220px;
      background-color: #fff;
      opacity: .5;
      position: absolute;
      left: 0;
      top: 0;
      /* 鼠标箭头样式 */
      cursor: move;
      display: none;
    }

// 获取小图和遮罩、大图、大盒子
    var small = document.getElementById("small")
    var mark = document.getElementById("mark")
    var big = document.getElementById("big")
    var bigimg = document.getElementById("bigimg")
    // 在小图区域内获取鼠标移动事件;遮罩跟随鼠标移动
    small.onmousemove = function (e) {
      // 得到遮罩相对于小图的偏移量(鼠标所在坐标-小图相对于body的偏移-遮罩本身宽度或高度的一半)
      var s_left = e.pageX - mark.offsetWidth / 2 - small.offsetLeft
      var s_top = e.pageY - mark.offsetHeight / 2 - small.offsetTop
      // 遮罩仅可以在小图内移动所以需要计算遮罩偏移量的临界值(相对于小图的值)
      var max_left = small.offsetWidth - mark.offsetWidth;
      var max_top = small.offsetHeight - mark.offsetHeight;
      // 遮罩移动右侧大图也跟随移动(遮罩每移动1px图片需要向相反对的方向移动n倍的距离)
      var n = big.offsetWidth / mark.offsetWidth
      // 遮罩跟随鼠标移动前判断:遮罩相对于小图的偏移量不能超出范围超出范围要重新赋值(临界值在上边已经计算完成:max_left和max_top)
      // 判断水平边界
      if (s_left < 0) {
        s_left = 0
      } else if (s_left > max_left) {
        s_left = max_left
      }
      //判断垂直边界
      if (s_top < 0) {
        s_top = 0
      } else if (s_top > max_top) {
        s_top = max_top
      }
      // 给遮罩left和top赋值(动态的?因为e.pageX和e.pageY为变化的量)动起来!
      mark.style.left = s_left + "px";
      mark.style.top = s_top + "px";
      // 计算大图移动的距离
      var levelx = -n * s_left;
      var verticaly = -n * s_top;
      // 让图片动起来
      bigimg.style.left = levelx + "px";
      bigimg.style.top = verticaly + "px";
    }
    // 鼠标移入小图内才会显示遮罩和跟随移动样式移出小图后消失
    small.onmouseenter = function () {
      mark.style.display = "block"
      big.style.display= "block"
    }
    small.onmouseleave = function () {
      mark.style.display = "none"
      big.style.display= "none"
    }

3、总结

  • 鼠标焦点一旦动起来它的偏移量就是动态的;父元素和子元素加上定位后通过动态改变某个元素的lefttop值来实现“动”的效果。
  • 大图/小图=放大镜(遮罩)/取景框
  • 两张图片一定要等比例缩放

相关文章

猜您喜欢

  • Json字符串+Cookie+localstorage JS中Json字符串+Cookie+localstorage

    想了解JS中Json字符串+Cookie+localstorage的相关内容吗Onion韩在本文为您仔细讲解Json字符串+Cookie+localstorage的相关知识和一些Code实例欢迎阅读和指正我们先划重点:JS中的Json字符串,JS中的Cookie,JS中的localstorage下面大家一起来学习吧。..
  • Springboot实现教务管理系统 java Springboot实现教务管理系统

    想了解java Springboot实现教务管理系统的相关内容吗java李杨勇在本文为您仔细讲解Springboot实现教务管理系统的相关知识和一些Code实例欢迎阅读和指正我们先划重点:Springboot实现教务管理系统,java Springboot,教务管理系统下面大家一起来学习吧。..

网友评论

Copyright 2020 www.ducttapegames.com 【环球游戏网】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式