原生js實現(xiàn)一個放大鏡效果超詳細

更新時間：2022年09月25日 15:01:46 作者：Coder66

這篇文章主要介紹了原生js實現(xiàn)一個放大鏡效果超詳細，文章圍繞主題展開詳細的內(nèi)容，具有一定的參考價值，需要的小伙伴可以參考一下

前言：

學習js之初，寫過js放大鏡，但是當時模模糊糊，似懂非懂，最近重溫js內(nèi)容，決定重寫了一下這個放大鏡效果，希望可以讓初學者對js-DOM的練習更好上手

一、放大鏡效果

二、實現(xiàn)步驟

1. 首先分析放大鏡結(jié)構

左邊圖片:img---原圖片
左邊圖片里面的類似于放大鏡的遮罩層:glass---用于選擇需要放大的部分
右邊放大的圖片:bigImg ---用于展示放大效果

html代碼如下：

  <div class="box">
    <div class="glassWrapper">
      <img src="./assets/green.jpg" class="img"/>
      <div class="glass" id="glass"></div>
    </div>
    <div class="bigWrapper">
      <img src="./assets/green.jpg" class="bigImg"/>
    </div>
  </div>

2. 整體樣式---css部分

整體居中： 左右兩張圖片居中垂直使用flex布局，網(wǎng)上很多，這里不多說布局問題

右邊放大效果的關鍵樣式： 底部有一張大圖片，有一個固定的框展示放大的部分，超過這個展示款的部分就遮住，從而出現(xiàn)一種被放大的效果，使用：overflow: hidden;

圖片移動的關鍵: 移動的圖片使用：絕對定位（注意子絕父相）

css代碼：

.glassTitle {
  color: #89cff0;
  text-align: center;
}

.box {
  width: 80vw;
  min-width: 800px;
  height: 80vh;
  min-height: 600px;
  line-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #f2f3f4;
  margin: 10px auto;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 1px #5d8aa8;
}

.glassWrapper{
  line-height: 0;
  position: relative;
}

.img {
  display: block;
  width: 250px;
  height: auto;
}

.glass {
  position: absolute;
  width: 80px;
  height: 80px;
  background: #89cff0;
  opacity: .5;
  display: none;
}

.bigWrapper {
  position: relative;
  width: 500px;
  height: 500px;
  background-color: #fff;
  border: 1px dashed #89cff0;
  border-radius: 10px;
  overflow: hidden;
}

.bigImg {
  width: 2500px;
  display: none;
  position: absolute;
}

3. JS操作dom實現(xiàn)放大鏡

現(xiàn)在樣式和結(jié)構都準備好了，就差來操作DOM了

1. 實現(xiàn)glass跟隨鼠標移動

效果是只要鼠標進入img中,就出現(xiàn)glass，出去就消失，所以給img添加鼠標監(jiān)聽事件mouseover,原本img是display:none, 后變成display:block，離開img的鼠標監(jiān)聽事件是mouseout,

const glassWrapper = document.querySelector('.glassWrapper'); // 放大鏡的盒子
? glassWrapper.addEventListener('mouseover', () => {
? ? glass.style.display = 'block';
? ? bigImg.style.display = 'block';
? });
  
? glassWrapper.addEventListener('mouseout', () => {
? ? glass.style.display = 'none';
? ? bigImg.style.display = 'none';
? })

2. 實現(xiàn)glass跟隨鼠標移動，并且鼠標位于glass中央

如圖：

e.pageX是鼠標相對于文檔（document）的水平坐標, e.pageY是鼠標相對文檔的垂直坐標
glassWrapper.offsetWidth是glassWrapper元素的水平偏移位置,glassWrapper.offsetTop是glassWrapper元素的垂直偏移位置,
e.pageX - glassWrapper.offsetLeft可以得到鼠標相對于glassWrapper的偏移量x
x - glass.offsetWidth / 2:x減去glass寬度的一半就可以得到glass相對于glassWrapper的偏移量，即可得到絕對定位的left,同理Top也可以得到
以下代碼即可實現(xiàn)glass跟隨鼠標移動

為什么因為glass是相對于glassWrapper而移動的？因為css里面的子絕父相

  box.addEventListener('mousemove', (e) => {
    // 該操作讓glassWrapper的左上角變成坐標原點, 因為glass是先相對于glassWrapper而移動的
    const x = e.pageX - glassWrapper.offsetLeft;
    const y = e.pageY - glassWrapper.offsetTop;
    // 讓鼠標在glass的中間位置
    let width = x - glass.offsetWidth / 2;
    let height = y - glass.offsetHeight / 2;

    // 改變放大鏡的位置
    glass.style.left = width + 'px';
    glass.style.top = height + 'px';

3. glass不超出img內(nèi)部

如圖絕對定位的left, 也就是width的最小是0，最大是glassWrapper.offsetWidth - glass.offsetWidth

  box.addEventListener('mousemove', (e) => {
    // 該操作讓glassWrapper的左上角變成坐標原點, 因為glass是先相對于glassWrapper而移動的
    const x = e.pageX - glassWrapper.offsetLeft;
    const y = e.pageY - glassWrapper.offsetTop;
    // 讓鼠標在glass的中間位置
    let width = x - glass.offsetWidth / 2;
    let height = y - glass.offsetHeight / 2;
    // 讓glass不超出img內(nèi)部
  + if (width <= 0) {
  +   width = 0;
  + } else if (width >= glassWrapper.offsetWidth - glass.offsetWidth) {
  +   width = glassWrapper.offsetWidth - glass.offsetWidth;
  + }
  + if (height <= 0) {
  +   height = 0;
  + } else if (height >= glassWrapper.offsetHeight - glass.offsetHeight) {
  +   height = glassWrapper.offsetHeight - glass.offsetHeight;
  + }

    // 改變放大鏡的位置
    glass.style.left = width + 'px';
    glass.style.top = height + 'px';
 })

4.重點：放大的圖片的移動--較難理解

首先確定放大比例并更改大圖片的大小

放大比例是由glass和bigWrapper之間的比例來決定的，所以首先先計算大圖片應該有多大，bigImg.style.width = img.offsetWidth * bigWrapper.offsetWidth / glass.offsetWidth + 'px';并且更改大圖片的大??；

移動大圖片left的正負

小圖片img和大圖片bigImg的left都是相對其父元素的，不同的是：左邊我們移動的是glass, 而右邊我們移動的是bigImg, glass往左邊移動(left為正），相當于視口相對于圖片往左邊移動，反過來，圖片就是相對于視口往右邊移（bigImg的left為負），所以bigImg的left和glass的left是符號是相反的

left的比例

bigImg移動的距離是glass移動的距離之間的比例由：大圖片和小圖片之間的比例（或者glass和glassWrapper之間的比例）來決定

    // 改變大圖片的位置
    bigImg.style.width = img.offsetWidth * bigWrapper.offsetWidth / glass.offsetWidth + 'px';
    bigImg.style.left = - width * bigImg.offsetWidth / img.offsetWidth + 'px';
    bigImg.style.top = - height * bigImg.offsetHeight / img.offsetHeight + 'px';