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: agreen; */      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.onmoumove = function (e) {      // 得到遮罩相对于小图的偏移量(鼠标所在专科有学位证吗坐标-小图相对于body的偏移-遮罩本身宽度或高度的一半)      var s_left = e.pagex - mark.offtwidth / 2 - small.offtleft      var s_top = e.pagey - mark.offtheight / 2 - small.offttop      // 遮罩仅可以在小图内移动，所以需要计算遮罩偏移量的临界值（相对于小图的值）      var max_left = small.offtwidth - mark.offtwidth;      var max_top = small.offtheight - mark.offtheight;      // 遮罩移动右侧大图也跟随移动（遮罩每移动1px，图片需要向相反对的方向移动n倍的距离）      var n = big.offtwidth / mark.offtwidth      // 遮罩跟随鼠标移动前判断：遮罩相对于小图的偏移量不能超出范围，超出范围要重新赋值（临界值在上边已经计算完成：max_left和max_top）      // 判断水平边界      if (s_left < 0) {        s_left = 0      } el if (s_left > max_left) {        s_left = max_left      }      //判断垂直边界      if (s_top < 0) {        s_top = 0      } el if (s_top > max_top) {        s_top = max_to论语十则翻译p      }      // 给遮罩left和top赋值（动态的？因为e.pagex和e.pagey为变化的量），动起来！      mark.style.left = s_l太原科技大学排名eft + "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.onmouenter = function () {      mark.style.display = "block"      big.style.display= "block"    }    small.onmouleave = function () {      mark.style.display = "none"      big.style.display= "none"    }

3、总结

到此这篇关于js实现放大镜详细的文章就介绍到这了,更多相关js实现放大镜内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！