这是某讯的一道笔试题，是一道挖空填代码的题，其实不难，就是看你对 API 的熟悉程度。哈哈，正好页面移动坐标的哪些 API 我都忘了，给我看老旧都想不出来，害，加油吧。

题目：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style type="text/css">
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.       }
  14.       .normal {
  15.         width: 300px;
  16.         height: 300px;
  17.         position: relative;
  18.       }
  20.       .normal > img {
  21.         width: 100%;
  22.         height: 100%;
  23.       }
  25.       .lay {
  26.         width: 150px;
  27.         height: 150px;
  28.         background: orange;
  29.         opacity: 0.5;
  30.         position: absolute;
  31.         left: 0;
  32.         top: 0;
  33.         cursor: move;
  34.         display: none;
  35.       }
  37.       .big {
  38.         width: 300px;
  39.         height: 300px;
  40.         position: absolute;
  41.         left: 350px;
  42.         top: 0px;
  43.         overflow: hidden;
  44.         display: none;
  45.       }
  47.       .big > img {
  48.         width: 600px;
  49.         height: 600px;
  50.         position: absolute;
  51.         display: block;
  52.       }
  53.     </style>
  54.   </head>
  56.   <body>
  57.     <section id="magnifier"></section>
  59.     <script type="text/javascript">
  60.       var magnifier = {
  61.         init(param) {
  62.           const el = param.el
  63.           const src = param.src
  64.           if (!el || !src) return
  65.           this.createElement(el, src)
  66.         },
  67.         createElement(el, src) {
  68.           const _this = this
  69.           const normalDiv = document.createElement('div')
  70.           normalDiv.className = 'normal'
  71.           const normalImg = document.createElement('img')
  72.           normalImg.src = src.normal
  73.           const normalSpan = document.createElement('span')
  74.           normalSpan.className = 'lay'
  75.           normalDiv.appendChild(normalImg)
  76.           normalDiv.appendChild(normalSpan)
  78.           const bigDiv = document.createElement('div')
  79.           bigDiv.className = 'big'
  80.           const bigImg = document.createElement('img')
  81.           bigImg.src = src.big
  82.           bigDiv.appendChild(bigImg)
  84.           el.appendChild(normalDiv)
  85.           el.appendChild(bigDiv)
  87.           normalDiv.addEventListener('mouseover', () => {
  88.             // TODO: 放大镜、被放大的图片都显示，渲染为块级元素
  90.           })
  91.           normalDiv.addEventListener('mouseout', () => {
  92.             // TODO: 放大镜、被放大的图片都隐藏，不渲染
  94.           })
  96.           normalDiv.addEventListener('mousemove', _moveHandler)
  98.           function _moveHandler(event) {
  99.             event = event || window.event
  100.             _this.moveHandler(event, normalDiv, normalSpan, bigImg)
  101.           }
  102.         },
  103.         moveHandler(event, normalDiv, normalSpan, bigImg) {
  104.           // tip: 该函数处理放大镜、被放大的图片的显示区域，x、y分别为鼠标在该模块中的位置坐标
  106.           let x = event.clientX - normalSpan.offsetWidth / 2
  107.           let y = event.clientY - normalSpan.offsetHeight / 2
  108.           // TODO: 判断临界值，重新设置放大镜、被放大的图片的位置
  110.         },
  111.       }
  112.       magnifier.init({
  113.         // TODO: 请获取id=magnifier的节点
  115.         el: null,
  116.         src: {
  117.           normal:
  118.           'https://uploadfiles.nowcoder.com/images/20211201/920662346_1638327818015/FE8B1A979ADF6E3C2C114AF3F9CA693C',
  119.           big: 'https://uploadfiles.nowcoder.com/images/20211201/920662346_1638327818015/FE8B1A979ADF6E3C2C114AF3F9CA693C',
  120.         },
  121.       })
  122.     </script>
  123.   </body>
  124. </html>

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style type="text/css">
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.       }
  14.       .normal {
  15.         width: 300px;
  16.         height: 300px;
  17.         position: relative;
  18.       }
  20.       .normal > img {
  21.         width: 100%;
  22.         height: 100%;
  23.       }
  25.       .lay {
  26.         width: 150px;
  27.         height: 150px;
  28.         background: orange;
  29.         opacity: 0.5;
  30.         position: absolute;
  31.         left: 0;
  32.         top: 0;
  33.         cursor: move;
  34.         display: none;
  35.       }
  37.       .big {
  38.         width: 300px;
  39.         height: 300px;
  40.         position: absolute;
  41.         left: 350px;
  42.         top: 0px;
  43.         overflow: hidden;
  44.         display: none;
  45.       }
  47.       .big > img {
  48.         width: 600px;
  49.         height: 600px;
  50.         position: absolute;
  51.         display: block;
  52.       }
  53.     </style>
  54.   </head>
  56.   <body>
  57.     <section id="magnifier"></section>
  59.     <script type="text/javascript">
  60.       var magnifier = {
  61.         init(param) {
  62.           const el = param.el
  63.           const src = param.src
  64.           if (!el || !src) return
  65.           this.createElement(el, src)
  66.         },
  67.         createElement(el, src) {
  68.           const _this = this
  69.           const normalDiv = document.createElement('div')
  70.           normalDiv.className = 'normal'
  71.           const normalImg = document.createElement('img')
  72.           normalImg.src = src.normal
  73.           const normalSpan = document.createElement('span')
  74.           normalSpan.className = 'lay'
  75.           normalDiv.appendChild(normalImg)
  76.           normalDiv.appendChild(normalSpan)
  78.           const bigDiv = document.createElement('div')
  79.           bigDiv.className = 'big'
  80.           const bigImg = document.createElement('img')
  81.           bigImg.src = src.big
  82.           bigDiv.appendChild(bigImg)
  84.           el.appendChild(normalDiv)
  85.           el.appendChild(bigDiv)
  87.           normalDiv.addEventListener('mouseover', () => {
  88.             // TODO: 放大镜、被放大的图片都显示，渲染为块级元素
  89.             bigDiv.style.display = 'block'
  90.             normalSpan.style.display = 'block'
  91.           })
  92.           normalDiv.addEventListener('mouseout', () => {
  93.             // TODO: 放大镜、被放大的图片都隐藏，不渲染
  94.             bigDiv.style.display = 'none'
  95.             normalSpan.style.display = 'none'
  96.           })
  98.           normalDiv.addEventListener('mousemove', _moveHandler)
  100.           function _moveHandler(event) {
  101.             event = event || window.event
  102.             _this.moveHandler(event, normalDiv, normalSpan, bigImg)
  103.           }
  104.         },
  105.         moveHandler(event, normalDiv, normalSpan, bigImg) {
  106.           // tip: 该函数处理放大镜、被放大的图片的显示区域，x、y分别为鼠标在该模块中的位置坐标
  107.           let x = event.clientX - normalSpan.offsetWidth / 2
  108.           let y = event.clientY - normalSpan.offsetHeight / 2
  109.           console.log('x:', x, 'y:', y)
  110.           // TODO: 判断临界值，重新设置放大镜、被放大的图片的位置
  112.           // 判断临界值，让放大镜区域的范围不超过图片范围
  113.           if (x < 0) {
  114.             x = 0
  115.           } else if (x > normalDiv.offsetWidth - normalSpan.offsetWidth) {
  116.             x = normalDiv.offsetWidth - normalSpan.offsetWidth
  117.           }
  118.           if (y < 0) {
  119.             y = 0
  120.           } else if (y > normalDiv.offsetHeight - normalSpan.offsetHeight) {
  121.             y = normalDiv.offsetWidth - normalSpan.offsetWidth
  122.           }
  123.           // 放大镜的移动
  124.           normalSpan.style.left = x + 'px'
  125.           normalSpan.style.top = y + 'px'
  127.           // 计算右边放大显示的图片的相对移动距离
  128.           let bigImgX =
  129.             x *
  130.             ((bigImg.offsetWidth - normalDiv.offsetWidth) /
  131.               (normalDiv.offsetWidth - normalSpan.offsetHeight))
  132.           let bigImgY =
  133.             y *
  134.             ((bigImg.offsetHeight - normalDiv.offsetHeight) /
  135.               (normalDiv.offsetHeight - normalSpan.offsetHeight))
  136.           // 大图片的移动
  137.           bigImg.style.left = -bigImgX + 'px'
  138.           bigImg.style.top = -bigImgY + 'px'
  139.         },
  140.       }
  141.       magnifier.init({
  142.         // TODO: 请获取id=magnifier的节点
  144.         el: document.querySelector('#magnifier'),
  145.         src: {
  146.           normal:
  147.             'https://uploadfiles.nowcoder.com/images/20211201/920662346_1638327818015/FE8B1A979ADF6E3C2C114AF3F9CA693C',
  148.           big: 'https://uploadfiles.nowcoder.com/images/20211201/920662346_1638327818015/FE8B1A979ADF6E3C2C114AF3F9CA693C',
  149.         },
  150.       })
  151.     </script>
  152.   </body>
  153. </html>

image.png