JS放大镜（适用于任何像素比）

JS放大镜（适用于任何像素比）

HTML：

<div style="display:flex;">

    <div id="box1">

      <div id="box0"></div>

    </div>

    <div id="box2">

      <div id="box3">



      </div>

    </div>

  </div>

 

CSS：

<style>

    * {

      margin: 0;

      padding: 0;

    }



    #box0 {

      position: absolute;

      background-color: rgba(0, 0, 0, .3);

      z-index: 1;

    }



    #box1 {

      position: relative;

      width: 640px;

      height: 452px;

      background: url(0.jpg) no-repeat;

      background-size: 100%;

      overflow: hidden;

    }



    #box2 {

      width: 640px;

      height: 452px;

      overflow: hidden;

    }



    #box3 {

      width: 3200px;

      height: 2260px;

      background: url(0.jpg) no-repeat;

      background-size: 3200px 2260px;

    }

  </style>

 

 

JS：

<script>

    let box0 = document.getElementById('box0')//放大镜

    let box1 = document.getElementById('box1')//缩略图

    let box2 = document.getElementById('box2')//原图框

    let box3 = document.getElementById('box3')//原图

    let sizeWidth = getStyleNum(getStyle(box3, "width")) / getStyleNum(getStyle(box1, "width"))//原图与缩略图的宽度比

    let sizeHeight = getStyleNum(getStyle(box3, "height")) / getStyleNum(getStyle(box1, "height"))//原图与缩略图的高度比

    window.onload = function () {

      box0.style.width = getStyleNum(getStyle(box1, "width")) / sizeWidth + 'px';

      box0.style.height = getStyleNum(getStyle(box1, "height")) / sizeHeight + 'px'



    }

    box1.onmousemove = function (ev) {

      let _event = ev || window.event

      let left = _event.pageX - box1.offsetLeft

      let top = _event.pageY - box1.offsetTop

      let minleft = _event.pageX - box1.offsetLeft//放大镜离左侧的最小距离

      let minTop = _event.pageY - box1.offsetTop//放大镜离上方的最小距离

      let maxleft = box1.offsetWidth - box0.offsetWidth / 2//放大镜离左侧的最大距离

      let maxTop = box1.offsetHeight - box0.offsetHeight / 2//放大镜离上方的最大距离

      left = left < 0 ? 0 : left;

      top = top < 0 ? 0 : top;

      if (left <= maxleft && minleft > box0.offsetWidth / 2) {

        box0.style.left = (left - box0.offsetWidth / 2) < 0 ? 0 : (left - box0.offsetWidth / 2) + 'px';

        box3.style.backgroundPositionX = -sizeWidth * left + sizeWidth * box0.offsetWidth / 2 + 'px';

      }



      if (top <= maxTop && minTop > box0.offsetHeight / 2) {

        box0.style.top = (top - box0.offsetHeight / 2) < 0 ? 0 : (top - box0.offsetHeight / 2) + 'px';

        box3.style.backgroundPositionY = -sizeHeight * top + sizeHeight * box0.offsetHeight / 2 + 'px';

      }



      let leftEnd = (-sizeWidth * left + left) < 0 ? (-sizeWidth * left + left) : (-left + sizeWidth * left)

      let topEnd = (-sizeHeight * top + top) < 0 ? (-sizeHeight * top + top) : (-top + sizeHeight * top)

    }



    //获取dom节点生效的样式值

    function getStyle(obj, arr) {

      if (window.getComputedStyle) {

        return window.getComputedStyle(obj, null)[arr]

      }

      return ele.currentStyle[arr]

    }

    //将生效的样式值转为Number

    function getStyleNum(Str) {

      let ret = Str.split('px')

      return ret[0] - 0

    }

  </script>