jQuery插件简易图像缩放

我一直在为我的一个客户写一个小脚本,需要放大产品图像。任务是创建一个脚本,允许用户在中等大小的图像上移动光标时看到产品的大细节。在这个过程中,我决定创建一个jQuery插件并与你们分享!

正如我所有的脚本一样,我试图让事情尽可能的轻量级,最重要的是,尽可能的可定制。我希望你会发现这很容易应用到你自己的网站上。

你需要这个插件工作的全部是锚元素,包含链接到大图像的小图像,但是这个结构是必需的:
QQ图片20220804150747

脚本(和CSS)负责剩下的事情。

选择

这个插件可以用几个选项和简单的CSS定义来定制。就CSS而言,你需要做的就是定义新创建的图像缩放元素的大小、位置和外观。在我的演示中,我使用了这个定义:

QQ图片20220804150737

你会注意到行高属性…我使用if来垂直对齐加载详细图像时显示的消息文本。当然,你可以使用你自己的定位方法,你自己的文本,如果你想插入额外的标记,并添加你自己的CSS样式的预加载程序。或许一些预装者gif作为预装者图片?我将把这个问题留给你,我在这里展示的是一个简单的例子,你可以很容易地定制。

让我们来看看插件选项。以下是它们的默认值和描述列表:

编号

默认值:"简单缩放"
新创建的图像缩放元素的ID。当然你可以使用你自己的,但是一定要相应地更新CSS。

默认

默认值:“身体”
这定义了新创建的图像缩放元素将被插入的DOM元素。通过编辑这个选项,您可以将它插入到DOM中您喜欢的任何地方。

附加

默认值:“真实”
如果设置为true(默认),新创建的元素将作为父元素的最后一个子元素插入。如果此选项设置为false,那么新创建的元素将作为父元素的第一个子元素插入。

事先装好

默认值:“正在加载…”
加载大图像之前出现的消息。您可以使用此选项编写自己的预加载消息,并插入任何您想要的HTML。如果你想用预装的gif,我建议你用背景图片。

错误

默认值:"加载图像时出现问题。"
如果找不到或无法加载大图像,将会出现此错误消息。您可以将此选项用于自定义错误消息。

下面是使用一些自定义选项的示例代码:

QQ图片20220804150722