JavaScript如何實(shí)現(xiàn)放大鏡

這篇文章給大家分享的是有關(guān)JavaScript如何實(shí)現(xiàn)放大鏡的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來(lái)看看吧。

實(shí)現(xiàn)原理

借助寬高等比例放大的兩張圖片，結(jié)合js中鼠標(biāo)偏移量、元素偏移量、元素自身寬高等屬性完成；左側(cè)遮罩移動(dòng)Xpx,右側(cè)大圖移動(dòng)X*倍數(shù)px；其余部分就是用小學(xué)數(shù)學(xué)算一下就OK了。

HTML和CSS：

 <divclass="wrap">
    <!-- 小圖與遮罩 -->
    <div id="small">
      <img src="img/1.jpg"  >
      <div id="mark"></div>
    </div>
    <!-- 等比例放大的大圖 -->
    <div id="big">
      <img src="img/2.jpg"  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;
      /* 鼠標(biāo)箭頭樣式 */
      cursor: move;
      display: none;
    }

// 獲取小圖和遮罩、大圖、大盒子
    var small = document.getElementById("small")
    var mark = document.getElementById("mark")
    var big = document.getElementById("big")
    var bigimg = document.getElementById("bigimg")
    // 在小圖區(qū)域內(nèi)獲取鼠標(biāo)移動(dòng)事件;遮罩跟隨鼠標(biāo)移動(dòng)
    small.onmousemove = function (e) {
      // 得到遮罩相對(duì)于小圖的偏移量(鼠標(biāo)所在坐標(biāo)-小圖相對(duì)于body的偏移-遮罩本身寬度或高度的一半)
      var s_left = e.pageX - mark.offsetWidth / 2 - small.offsetLeft
      var s_top = e.pageY - mark.offsetHeight / 2 - small.offsetTop
      // 遮罩僅可以在小圖內(nèi)移動(dòng)，所以需要計(jì)算遮罩偏移量的臨界值（相對(duì)于小圖的值）
      var max_left = small.offsetWidth - mark.offsetWidth;
      var max_top = small.offsetHeight - mark.offsetHeight;
      // 遮罩移動(dòng)右側(cè)大圖也跟隨移動(dòng)（遮罩每移動(dòng)1px，圖片需要向相反對(duì)的方向移動(dòng)n倍的距離）
      var n = big.offsetWidth / mark.offsetWidth
      // 遮罩跟隨鼠標(biāo)移動(dòng)前判斷：遮罩相對(duì)于小圖的偏移量不能超出范圍，超出范圍要重新賦值（臨界值在上邊已經(jīng)計(jì)算完成：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賦值（動(dòng)態(tài)的？因?yàn)閑.pageX和e.pageY為變化的量），動(dòng)起來(lái)！
      mark.style.left = s_left + "px";
      mark.style.top = s_top + "px";
      // 計(jì)算大圖移動(dòng)的距離
      var levelx = -n * s_left;
      var verticaly = -n * s_top;
      // 讓圖片動(dòng)起來(lái)
      bigimg.style.left = levelx + "px";
      bigimg.style.top = verticaly + "px";
    }
    // 鼠標(biāo)移入小圖內(nèi)才會(huì)顯示遮罩和跟隨移動(dòng)樣式，移出小圖后消失
    small.onmouseenter = function () {
      mark.style.display = "block"
      big.style.display= "block"
    }
    small.onmouseleave = function () {
      mark.style.display = "none"
      big.style.display= "none"
    }

感謝各位的閱讀！關(guān)于“JavaScript如何實(shí)現(xiàn)放大鏡”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！