jQuery插件简易图像缩放

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

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

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

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

选择

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

 

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

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

编号

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

 

默认

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

附加

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

 

事先装好

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

错误

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

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

 

0

---