聯絡我們

你要買什麼？

經過麥伊凡
2024 年 4 月 14 日

懸停時放大影像

使用自訂程式碼為滑鼠懸停時的影像添加適合桌面和行動裝置的放大鏡。

您的網站中可能有富含複雜細節的圖像，例如產品照片或藝術品。透過使用一些自訂程式碼，您可以讓訪客將滑鼠懸停在這些圖像的特定部分上並放大它們，而無需移動肌肉。 

使用放置在 Webflow Designer 中頁面自訂程式碼設定中的自訂程式碼，懸停時會放大粉紅色、紅色和綠色盒子和手錶的圖像。

本教學將引導您完成透過按照以下步驟將自訂程式碼插入頁面或項目來放大圖像的過程： 

  1. 插入自訂程式碼
  2. 指定一個類別名
  3. 自訂放大鏡

<script type="text/javascript" src="https://assets.website-files.com/5e2755779d8b8ea1d6373797/5ea88e92dce9b4b66f165490_zoom.txt"></script>
<script>
  jQuery(function(){

  if(!$.fn.imagezoomsl){

      $('.msg').show();
      return;
    }
    else $('.msg').hide();

    // plugin initialization
    $('.image').imagezoomsl({

      innerzoommagnifier: true,
      classmagnifier: "round-loope",
      magnifiersize: [150, 150],
      // disables the scrolling of the document with the mouse wheel when the cursor is over the image
      disablewheel: false
    });
  });
</script>

插入自訂程式碼

有兩種方法可以將自訂程式碼插入到您的專案中： 

  • 將程式碼包含在整個專案中
  • 將程式碼整合到單一頁面中

要將程式碼插入整個專案中：

  1. 訪問您的項目 設定
  2. 選擇 自訂程式碼 標籤
  3. 將程式碼插入到 頁尾碼 部分（例如，「之前 </body> 標籤”）
  4. 點選 儲存變更

筆記： 您可以使用熱鍵將程式碼插入您的專案中 指令+V （在 Mac 上）或 控制+V （在 Windows 上）。

在項目設定中選擇「自訂代碼」標籤可顯示項目中可以放置自訂代碼的位置。 
影像放大自訂程式碼應放置在專案設定的頁腳程式碼部分，並在 </body> 標籤。

要將程式碼插入到單獨的頁面中： 

  1. 啟動 設計師
  2. 訪問 頁面面板 並選擇所需頁面的頁面設定齒輪圖標
  3. 捲動到 自訂程式碼 頁面設定中的部分
  4. 將程式碼插入到 前 </body> 標籤 部分
  5. 點選 節省

筆記： 您可以使用熱鍵將程式碼貼到您的專案中 指令+V （在 Mac 上）或 控制+V （在 Windows 上）。

要訪問頁面的設置，請打開“頁面”面板並將滑鼠懸停在頁面上以查看要單擊的齒輪圖示。 
頁面的自訂程式碼設定會被反白顯示，特別是之前 </body> 標籤部分。

您已成功將自訂程式碼整合到您的專案中！

指定一個類別名

讓我們為要套用放大效果的圖像分配一個唯一的類別名稱：

  1. 選擇 影像 你想放大
  2. 訪問 風格面板 並點擊 選擇器字段
  3. 給它一個 班級 （例如“放大”） 
影像的選擇器欄位顯示新增到其中的新類別「放大」。

讓我們在程式碼中包含“Magnify”類別： 

  1. 訪問 頁面面板 並選擇放置自訂放大鏡代碼的頁面的頁面設定齒輪圖標
  2. 捲動到 前 </body> 標籤 頁面設定中的部分
  3. 代替 」。影像」 加上你的班級名稱（例如，「.放大”） 
  4. 點選 節省
將圖像放大的程式碼插入頁面設定的自訂程式碼後，請確保修改程式碼以對應新定義的「Magnify」類別。

有用的提示： 不要在正在進行的專案中複製或複製類，而是考慮使用 全球級 或一個 組合類 為用於放大的圖像建立一個獨特的類別。確保根據前面概述的步驟將不同的放大等級名稱包含在您的自訂程式碼中。了解有關全域類別和組合類別的更多資訊。

繼續發布您的專案並導航到您的即時網站以見證您的個人化程式碼的運作。只需將滑鼠懸停在已套用類別名稱的圖像上（例如以類別名稱“Magnify”標識的圖像），然後觀察放大鏡在您將遊標滑過圖像時追蹤您的遊標移動。

自訂放大工具

預設情況下，放大鏡是一個 150 x 150 像素的正方形。讓我們修改它的尺寸、形狀並引入投影效果。

我們的自訂程式碼中的預設設定將放大鏡尺寸指定為 150 x 150 像素。我們放大一下：

  1. 訪問 頁面面板 並選擇包含您自訂的放大碼的頁面上的頁面設定齒輪圖示。
  2. 向下捲動到 前 </body> 標籤 頁面設定中的部分並精確定位「magnifiersize: [150, 150]」程式碼片段。
  3. 將兩個 150 像素值調整為更大的數字（例如，每個 300 像素）。
  4. 儲存您的變更。
若要調整擴大機的大小，您必須修改頁面設定中自訂程式碼的擴大機大小部分中的像素值。

讓我們透過在新的基礎上設定基本樣式，將放大鏡形狀從方形變成圓形。 分區塊:

  1. 打開 航海家 並選擇 身體 元素。
  2. 利用 快速尋找 插入一個 分區塊 作為頁面上的結束元素。
  3. 選擇 分區塊，啟動 風格面板，然後點擊進入 選擇器字段.
  4. 指定一個類別名 分區塊 使自訂程式碼能夠識別新的放大鏡形狀（例如“圓環”）。
  5. 使用權 風格面板 > 邊框 並定義一個 半徑 50%。

在此階段，Div 區塊可能會顯示為橢圓形，但放大鏡的大小由您先前設定的 300 像素控制。

內幕提示： 按 命令 + 乙 （在 Mac 上）或 控制 + 乙 （在 Windows 上）觸發 快速尋找 並及時將元素添加到您的項目中。

樣式化 Div 區塊的 Selector 欄位顯示附加到它的新穎的「round-loope」類別。
“round-loope”Div 區塊的邊框半徑調整為 50%。

為了給放大鏡帶來更多的深度，讓我們在它後面添加一個陰影：

  1. 選擇 分區塊.
  2. 訪問 風格面板 > 效果.
  3. 納入一個 盒子陰影 透過選擇加號圖示並根據您的喜好自訂陰影。

自從我們的“循環” 分區塊 僅影響我們的放大鏡的樣式，我們不希望 分區塊 在我們的頁面上可見。讓我們將其隱藏起來：

  1. 選擇“圓環” 分區塊.
  2. 打開 風格面板 > 佈局.
  3. 調整 展示 到 沒有任何.
  4. 發布 該項目並瀏覽您的網站以預覽新樣式的放大鏡。
使用整合到 Webflow Designer 中頁面自訂程式碼設定中的自訂程式碼懸停時顯示粉紅色、紅色和綠色框和手錶的圖像。

此放大工具也可以在行動裝置上使用。使用者可以點擊影像來查看特寫鏡頭，尤其是在平板電腦和智慧型手機等裝置上。

透過點擊影像的分段區域，可以在行動裝置上放大呈現粉紅色、紅色和綠色盒子和手錶的影像。此功能是透過將自訂程式碼整合到 Webflow Designer 中頁面的自訂程式碼設定中來實現的。

恭喜！您已經透過放大功能增強了影像的潛力！

麥伊凡
Ewan Mak 的最新帖子 (看全部)

相關文章

  • 適應性設計簡介

    了解重排內容、固定大小、相對大小和斷點（媒體查詢）如何幫助創建...

  • 半透明性

    使用不透明度更改元素的透明度等級以創建獨特的視覺效果。

  • 動作

    具有過渡的狀態之間的平滑動畫

經過麥伊凡
更新於