使用JavaScript實(shí)現(xiàn)簡單圖像放大鏡效果

更新時(shí)間：2022年08月02日 08:23:06 作者：海擁

圖像放大鏡在很多網(wǎng)站中都扮演著重要的角色，大多數(shù)開發(fā)人員使用?jquery?來創(chuàng)建圖像放大鏡。在本教程中，我將向大家展示如何使用?HTML、CSS?和?JavaScript?制作一個(gè)簡單的圖像放大鏡，需要的可以參考一下

項(xiàng)目基本結(jié)構(gòu)

目錄結(jié)構(gòu)如下：

第 1 步：圖像放大鏡的基本結(jié)構(gòu)

使用以下 HTML 和 CSS 代碼，首先在網(wǎng)頁上為此圖像放大鏡 HTML創(chuàng)建了一個(gè)框。您可以在此框中看到圖像。這里框的寬度：650px，高度：400 像素已經(jīng)用過。它被一個(gè) 5px 的邊框包圍。

<div class="container">
     
</div>

body,
html {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  min-width: 700px;
  background: rgb(202, 201, 201);
}
.container {
  width: 650px;
  height: 400px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 5px solid rgb(244, 254, 255);
}

第 2 步：將圖像添加到放大鏡

現(xiàn)在，一個(gè)圖像已添加到這個(gè)簡單的圖像放大鏡項(xiàng)目中。在這里，您可以使用您選擇的圖像。

<div id="zoom">
  <img src="https://img-blog.csdnimg.cn/c43ca410ce4a40e4836664f7dbe98ad5.png" alt="">
</div>

#zoom img{
  width: 650px;
  height: 400px;
}

第 3 步：CSS設(shè)計(jì)放大鏡

現(xiàn)在已經(jīng)創(chuàng)建了放大鏡玻璃，可以在其中通過縮放看到圖像。我將通過 JavaScript 添加這個(gè)元素?，F(xiàn)在我只是在設(shè)計(jì)。

#lens {
  position: absolute;
  border: 2px solid grey;
  border-radius: 50%;
  overflow: hidden;
  cursor: none;
  box-shadow: inset 0 0 10px 2px grey;
  filter: drop-shadow(0 0 2px grey);
}

#lens > * {
  cursor: none;
}

第 4 步：使用 JavaScript 激活圖像放大鏡

這個(gè)CSS 圖像放大鏡需要一些 JavaScript 才能工作。沒有使用 jQuery 或外部庫。因此，如果您了解基本的 JavaScript，您就可以構(gòu)建它。

//lensSize => 寬度和高度
const lensSize = 200;

function magnify(id, zoom){
  const el = document.getElementById(id);
//cloneNode() 方法創(chuàng)建一個(gè)節(jié)點(diǎn)的副本，并返回克隆
  const copy = el.cloneNode(true);
//createElement() 方法創(chuàng)建由 tagName 指定的 HTML 元素
  const lens = document.createElement("div");
  
//setAttribute() 設(shè)置指定元素的屬性值
  lens.setAttribute("id","lens")  
  lens.style.width = lensSize + "px";
  lens.style.height = lensSize + "px";
  
//appendChild() 方法用于插入一個(gè)新節(jié)點(diǎn)
  el.appendChild(lens);
//getBoundingClientRect() 方法返回元素的大小及其位置
  el.getBoundingClientRect();
  copy.style.zoom = zoom;
  lens.appendChild(copy);
  
  copy.style.width = (el.offsetWidth * zoom) + "px";
  copy.style.heigth = (el.offsetHeight * zoom) + "px";
  copy.style.position = "absolute";
  
//當(dāng)指針在元素上移動(dòng)時(shí)執(zhí)行 MouseMove
  el.addEventListener("mousemove", (ev) => {
//preventDefault() 方法停止選定元素的默認(rèn)操作
    ev.preventDefault();
    ev.stopPropagation();
    const pos = getCursorPos(ev);
    lens.style.left =  - (lensSize/2) + pos.x + "px";
    lens.style.top = - (lensSize/2) + pos.y + "px";
    copy.style.left = - (pos.x - el.offsetLeft) + (lensSize/zoom)*0.5 + "px";
    copy.style.top = - (pos.y - el.offsetTop) + (lensSize/zoom)*0.5  + "px";
  })
}

  function getCursorPos(e) {
    var x = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
    var y = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
    return {x : x , y : y};
  }
//放大值
magnify("zoom", 4)

JavaScript 圖像放大鏡在很多網(wǎng)站中都扮演著非常重要的角色。如果你需要放大項(xiàng)目中的任何圖像，則可以使用這種 javascript 類型的圖像放大鏡。