js實現(xiàn)圖片局部放大鏡效果的示例代碼

更新時間：2023年12月06日 11:40:10 作者：杰森斯坦李

這篇文章主要為大家詳細介紹了如何利用JavaScript實現(xiàn)圖片局部放大鏡效果,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下

js實現(xiàn)放大鏡，先來看效果

鼠標移動到左側區(qū)域，右側區(qū)域放大圖片對應的位置

首先來看html部分，一共由3個div組成

  <!-- 圖片盒子 -->
  <div class="box">
    <!-- 放大鏡 -->
    <div class="area"></div>
  </div>
  <!-- 放大后的區(qū)域 -->
  <div class="zoom-content"></div>

下面來編寫一下css

    .box{
      display: inline-block;
      position: relative;
      width:400px;
      height:400px;
      border:1px solid red;
      background-image: url('https://img2.baidu.com/it/u=3663343515,2094544376&fm=253&fmt=auto&app=138&f=PNG?w=400&h=400');
      background-size: 100% 100%;
      vertical-align: top;
    }
    .area{
      position: absolute;
      width:200px;
      height:200px;
      background-color: rgba(0, 0, 255,.5);
      cursor: move;
    }
    .zoom-content{
      display: inline-block;
      width:500px;
      height:500px;
      border:1px solid red;
      background-image: url('https://img2.baidu.com/it/u=3663343515,2094544376&fm=253&fmt=auto&app=138&f=PNG?w=400&h=400');
      background-repeat: no-repeat;
    }

編寫完成后如圖

下面開始js邏輯部分

1.我們首先開始實現(xiàn)第一個功能，鼠標移入框內后，讓藍色的盒子（放大鏡）跟著鼠標移動

    // 先獲取DOM元素
    
    let area = document.querySelector('.area'); // 放大鏡
    let box = document.querySelector('.box'); // 圖片盒子
    let zoom = document.querySelector('.zoom-content'); //右側放大區(qū)域
    
    // 放大鏡藍色背景盒子尺寸
    let areaWidth = area.clientWidth;
    let areaHeight = area.clientHeight;
    // 鼠標移入后的事件
    const enter = (event) => {
      // 設置放大鏡的位置
      setAreaPosition(event);
      box.addEventListener("mousemove",move);
      box.addEventListener("mouseleave",leave);
    }
    // 鼠標移動事件    
    const move = (event) => {
      setAreaPosition(event);
    }
    //鼠標移出后 取消綁定一下
    const leave = () => {
      box.removeEventListener("mousemove",move);
      box.removeEventListener("mouseleave",leave);
    }
    // 設置放大鏡的位置
    const setAreaPosition = (event) => {
      // 讓放大鏡垂直居中顯示在鼠標移動后的位置 需減去自身方向的一半
      let x = event.x - areaWidth / 2;
      let y = event.y - areaHeight / 2;
      area.style.left = x+"px";
      area.style.top = y+"px";
    }
    box.addEventListener("mouseenter",enter);

這樣就能讓放大鏡跟隨鼠標移動了，但是有點瑕疵，需要讓放大鏡一直保持在盒子里面，需要判斷一下距離邊界情況

    // 圖片盒子大小尺寸
    let boxWidth = box.clientWidth;
    let boxHeight = box.clientHeight;
    // 放大鏡X軸極限距離
    let maxX = boxWidth - areaWidth;
    // 放大鏡Y軸極限距離
    let maxY = boxHeight - areaHeight;

maxX，maxY就是邊界的距離，我們需要在setAreaPosition函數(shù)中，對x軸，y軸的大小做一下限制

    const setAreaPosition = (event) => {
      // 讓放大鏡垂直居中顯示在鼠標移動后的位置 需減去自身方向的一半
      let x = event.x - areaWidth / 2;
      let y = event.y - areaHeight / 2;
      // x的值不能大于maxX,同時不能小于0，y的判斷同理
      x = Math.min(maxX,Math.max(0,x));
      // y的值不能大于maxY,同時不能小于0
      y = Math.min(maxY,Math.max(0,y));
      area.style.left = x+"px";
      area.style.top = y+"px";
    }

通過Math.min方法和Math.max方法就能對x,y極限值做限制了

下面我們來設置一下右側放大區(qū)域，目前來看它并沒有放大，而是保持了圖片本來的大小，下面是js部分

    // 先獲取一下縮放的倍率，也就是放大鏡和圖片盒子做對比
    // 縮放倍率
    let xScale = boxWidth / areaWidth;
    let yScale = boxHeight / areaHeight;
    // 知道了倍率后，我們對放大區(qū)域的圖片大小做一下設置
    // 因為使用的是背景圖片所以需設置一下backgroundSize屬性
    zoom.style.backgroundSize=`${xScale * 100}% ${yScale * 100}%`;

這一部分呢可以理解為把右側的放大區(qū)域(.zoom-content)看作是放大鏡(.area);

下面只差最后一部分了，移動鼠標，讓右側放大區(qū)域改變，只需要改變(.zoom-content)的backgroundPosition即可

那的backgroundPosition的值怎么計算呢？

綠色背景假設為圖片，左側的藍色是放大鏡，右側的藍色是放大后的區(qū)域，這樣就一目了然了，先算出放大鏡距離圖片盒子的多少比例，然后在拿這個比例去算出占放大后的背景多少像素就可以了

    // 縮放后的圖片尺寸
    let bgWidth = zoom.clientWidth * xScale;
    let bgHeight = zoom.clientHeight * yScale;

setAreaPosition函數(shù)修改一下

    // 設置放大鏡的位置
    const setAreaPosition = (event) => {
      let x = event.x - areaWidth / 2;
      let y = event.y - areaHeight / 2;
      // x的值不能大于maxX,同時不能小于0，y的判斷同理
      x = Math.min(maxX,Math.max(0,x));
      // y的值不能大于maxY,同時不能小于0
      y = Math.min(maxY,Math.max(0,y));
      area.style.left = x+"px";
      area.style.top = y+"px";
      // 計算背景距離，為什么為負數(shù)，負數(shù)圖片為往右走，正數(shù)為左走
      // x / boxWidth 放大鏡距離左側的比例，根據(jù)這個比例 * 相應的圖片寬度，就知道圖片要走到哪里了
      zoom.style.backgroundPosition = `${-(x / boxWidth * bgWidth)}px ${-(y / boxHeight * bgHeight)}px`;
    }

后續(xù)可以在移入和移出時改變(.area)放大鏡的visibility就行

// enter 移入
area.style.visibility = 'visible';
// leave 移出
area.style.visibility = 'hidden';

完整代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      display: inline-block;
      position: relative;
      width:400px;
      height:400px;
      border:1px solid red;
      background-image: url('https://img2.baidu.com/it/u=3663343515,2094544376&fm=253&fmt=auto&app=138&f=PNG?w=400&h=400');
      background-size: 100% 100%;
      vertical-align: top;
    }
    .area{
      position: absolute;
      width:200px;
      height:200px;
      background-color: rgba(0, 0, 255,.5);
      visibility: hidden;
      cursor: move;
    }
    .zoom-content{
      display: inline-block;
      width:500px;
      height:500px;
      border:1px solid red;
      background-image: url('https://img2.baidu.com/it/u=3663343515,2094544376&fm=253&fmt=auto&app=138&f=PNG?w=400&h=400');
      background-repeat: no-repeat;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="area"></div>
  </div>
  <div class="zoom-content"></div>
  <script>
    // 獲取DOM元素
    let area = document.querySelector('.area');
    let box = document.querySelector('.box');
    let zoom = document.querySelector('.zoom-content');
    // 藍色背景盒子尺寸
    let areaWidth = area.clientWidth;
    let areaHeight = area.clientHeight;
    // 圖片盒子大小尺寸
    let boxWidth = box.clientWidth;
    let boxHeight = box.clientHeight;
    // 藍色盒子X軸極限距離
    let maxX = boxWidth - areaWidth;
    // 藍色盒子Y軸極限距離
    let maxY = boxHeight - areaHeight;
    // 縮放倍率
    let xScale = boxWidth / areaWidth;
    let yScale = boxHeight / areaHeight;
    // 縮放后的圖片尺寸
    let bgWidth = zoom.clientWidth * xScale;
    let bgHeight = zoom.clientHeight * yScale;
    zoom.style.backgroundSize=`${xScale * 100}% ${yScale * 100}%`;
    const enter = (event) => {
      area.style.visibility = 'visible';
      setAreaPosition(event);
      box.addEventListener("mousemove",move);
      box.addEventListener("mouseleave",leave);
    }
    const leave = () => {
      area.style.visibility = 'hidden';
      box.removeEventListener("mousemove",move);
      box.removeEventListener("mouseleave",leave);
    }
    const setAreaPosition = (event) => {
      let x = event.x - areaWidth / 2;
      let y = event.y - areaHeight / 2;
      x = Math.min(maxX,Math.max(0,x));
      y = Math.min(maxY,Math.max(0,y));
      area.style.left = x+"px";
      area.style.top = y+"px";
      zoom.style.backgroundPosition = `${-(x / boxWidth * bgWidth)}px ${-(y / boxHeight * bgHeight)}px`;
    }
    const move = (event) => {
      setAreaPosition(event);
    }
    box.addEventListener("mouseenter",enter)
  </script>
</body>
</html>

以上就是js實現(xiàn)圖片局部放大鏡效果的示例代碼的詳細內容，更多關于js圖片局部放大鏡的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

前端echarts加標記點及標記線和提示框詳細代碼示例
ECharts中的標記線是一條平行于x軸的水平線,有最大值、最小值、平均值等數(shù)據(jù)的標記線,它也是在series字段下進行配置的,下面這篇文章主要給大家介紹了關于前端echarts加標記點及標記線和提示框的相關資料,需要的朋友可以參考下
2024-06-06
bootstrap table實現(xiàn)x-editable的行單元格編輯及解決數(shù)據(jù)Empty和支持多樣式問題
本文著重解決x-editable編輯的數(shù)據(jù)動態(tài)添加和顯示數(shù)據(jù)為Empty的問題，還有給表格單元格的內容設置多樣式，使得顯示多樣化,需要的朋友可以參考下
2017-08-08
javascript簡單事件處理和with用法介紹
本文為大家介紹下javascript事件處理及with用法，主要是鼠標點擊與移動，感興趣的朋友可以參考下
2013-09-09
JS圖片無縫、平滑滾動代碼
這篇文章主要介紹了JS圖片無縫、平滑滾動的實現(xiàn),需要的朋友可以參考下
2014-03-03
Parcel.js + Vue 2.x 極速零配置打包體驗教程
這篇文章主要介紹了Parcel.js + Vue 2.x 極速零配置打包體驗的相關資料,需要的朋友可以參考下
2017-12-12
整理一些最近經常遇到的前端面試題
這篇文章主要給大家整理了一些在面試的時候經常遇到的前端面試題，本文總結的這三十道面試題都是一些最近碰到的一些較為有用的前端題目，相信會對大家面試具有一定的參考價值，需要的朋友可以參考學習，下面來一起看看吧。
2017-04-04
JavaScript實現(xiàn)點擊圖片翻轉效果
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)點擊圖片翻轉效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10
微信小程序自定義鍵盤內部虛擬支付
這篇文章主要為大家詳細介紹了微信小程序自定義鍵盤，內部虛擬支付，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-12-12
一段多瀏覽器的"復制到剪貼板"javascript代碼
一段多瀏覽器的"復制到剪貼板"javascript代碼...
2007-03-03
Bootstrap基本組件學習筆記之面板(14)
這篇文章主要為大家詳細介紹了Bootstrap基本組件學習筆記之面板,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12