图片放大镜

2022-06-18
实现一个图片放大镜效果，腾讯春招实习前端笔试第一题
<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }

      .normal {
        width: 300px;
        height: 300px;
        position: relative;
      }

      .normal>img {
        width: 100%;
        height: 100%;
      }

      .lay {
        width: 150px;
        height: 150px;
        background: orange;
        opacity: 0.5;
        position: absolute;
        left: 0;
        top: 0;
        cursor: move;
        display: none;
      }

      .big {
        width: 300px;
        height: 300px;
        position: absolute;
        left: 350px;
        top: 0px;
        overflow: hidden;
        display: none;
      }

      .big>img {
        width: 600px;
        height: 600px;
        position: absolute;
        display: block;
      }

    </style>
  </head>

  <body>
    <section id="magnifier"></section>

    <script type="text/javascript">
      var magnifier = {
        init(param) {
          const el = param.el
          const src = param.src
          if (!el || !src) return
          this.createElement(el, src)
        },
        createElement(el, src) {
          const _this = this
          const normalDiv = document.createElement('div')
          normalDiv.className = 'normal'
          const normalImg = document.createElement('img')
          normalImg.src = src.normal
          const normalSpan = document.createElement('span')
          normalSpan.className = 'lay'
          normalDiv.appendChild(normalImg)
          normalDiv.appendChild(normalSpan)

          const bigDiv = document.createElement('div')
          bigDiv.className = 'big'
          const bigImg = document.createElement('img')
          bigImg.src = src.big
          bigDiv.appendChild(bigImg)

          el.appendChild(normalDiv)
          el.appendChild(bigDiv)

          normalDiv.addEventListener('mouseover', () => {
            //TODO
            normalSpan.style.display = "block";
            bigDiv.style.display = "block";
          })
          normalDiv.addEventListener('mouseout', () => {
            //TODO
            normalSpan.style.display = "none";
            bigDiv.style.display = "none";
          })

          normalDiv.addEventListener('mousemove', _moveHandler)

          function _moveHandler(event) {
            event = event || window.event
            _this.moveHandler(event, normalDiv, normalSpan, bigImg)
          }
        },
        moveHandler(event, normalDiv, normalSpan, bigImg) {
          // tip: 该函数处理放大镜、被放大的图片的显示区域，x、y分别为鼠标在该模块中的位置坐标

          const scale = 2
          let x = event.clientX - (normalSpan.offsetWidth / 2)
          let y = event.clientY - (normalSpan.offsetHeight / 2)
          // TODO: 判断临界值，重新设置放大镜、被放大的图片的位置
          const { clientY, clientX } = event;
          const rect = normalDiv.getBoundingClientRect();
          const { left, top, width, height } = rect;
          let layLeft, layTop;
          if ((clientY + (normalSpan.offsetHeight / 2)) > (top + height)) layTop = top + height - normalSpan.offsetHeight;
          else if ((clientY - (normalSpan.offsetHeight / 2)) < 0) layTop = 0;
          else layTop = clientY - (normalSpan.offsetHeight / 2);

          if ((clientX + (normalSpan.offsetWidth / 2)) > (left + width)) layLeft = left + width - normalSpan.offsetWidth;
          else if ((clientX - (normalSpan.offsetWidth / 2)) < 0) layLeft = 0;
          else layLeft = clientX - (normalSpan.offsetWidth / 2);
          normalSpan.style.left = `${layLeft}px`;
          normalSpan.style.top = `${layTop}px`;
          bigImg.style.left = `-${layLeft * 2}px`;
          bigImg.style.top = `-${layTop * 2}px`;
        }
      }
      magnifier.init({
        //TODO
        el: document.getElementById('magnifier'),
        src: {
          normal: 'https://uploadfiles.nowcoder.com/images/20211201/920662346_1638327818015/FE8B1A979ADF6E3C2C114AF3F9CA693C',
          big: 'https://uploadfiles.nowcoder.com/images/20211201/920662346_1638327818015/FE8B1A979ADF6E3C2C114AF3F9CA693C'
        }
      })        
    </script>
  </body>

</html>
主要逻辑为，原图片缩小后展示，并在页面某处放置一个完全大小的原图片，但视窗设置为缩小后的视窗，通过绝对定位移动图片位置造成放大镜的视觉效果，类似于雪碧图