经过麦宜云

2024年4月14日

悬停时放大图像

使用自定义代码为鼠标悬停时的图像添加适合桌面和移动设备的放大镜。

您的网站中可能有一些包含丰富复杂细节的图片，例如产品照片或艺术品。通过使用一些自定义代码，您可以让访问者将鼠标悬停在这些图片的特定部分上并放大这些部分，而无需移动任何动作。

使用放入 Webflow 设计器中页面自定义代码设置中的自定义代码，粉色、红色和绿色盒子和手表的图像在悬停时被放大。

本教程将指导您通过将自定义代码插入页面或项目来放大图像的过程，具体步骤如下：

插入自定义代码
指定班级名称
自定义放大镜


<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>

插入自定义代码

有两种方法可以将自定义代码插入到您的项目中：

将代码包含在整个项目中
将代码集成到单个页面中

要将代码插入到整个项目中：

访问你的项目的设置
选择 自定义代码 标签
将代码插入 页脚代码 部分（例如，“之前 </body> 标签”）
点击 保存更改

笔记： 您可以使用热键将代码插入到项目中 命令 + V （在 Mac 上）或 Control + V （在 Windows 上）。

在项目设置中选择“自定义代码”选项卡，以显示可在项目中放置自定义代码的位置。

图像放大自定义代码应放置在项目设置的页脚代码部分中，并在 </body> 标签。

要将代码插入到单个页面：

启动 设计师
访问 页面面板 并选择所需页面的页面设置齿轮图标
滚动到 自定义代码 页面设置中的部分
将代码插入 前 </body> 标签 部分
点击节省

笔记： 您可以使用热键将代码粘贴到项目中 命令 + V （在 Mac 上）或 Control + V （在 Windows 上）。

要访问页面的设置，请打开“页面”面板并将鼠标悬停在页面上以查看可单击的齿轮图标。

页面的自定义代码设置会突出显示，特别是“之前” </body> 标签部分。

您已成功将自定义代码集成到您的项目中！

指定班级名称

让我们为想要应用放大效果的图像分配一个唯一的类名：

选择图像你想放大
访问 样式面板 并点击 选择器字段
给它一个班级（例如，“放大”）

图像的选择器字段显示添加了新的“放大”类。

让我们在代码中包含“放大”类：

访问 页面面板 并选择放置自定义放大镜代码的页面的页面设置齿轮图标
滚动到 前 </body> 标签 页面设置中的部分
代替 ”。图像” 替换为您的班级名称（例如，“.放大”）
点击节省

在页面设置的自定义代码中插入图片放大的代码后，一定要修改该代码，以对应新定义的“放大”类。

要调整放大镜的大小，您必须修改页面设置中的自定义代码的放大镜尺寸部分中的像素值。

经过麦宜云

更新于 2024年4月14日

版图设计