imgLiquid 技术文档

本文档将为您提供 imgLiquid 的安装指南、使用说明以及 API 使用文档，帮助您更好地理解和运用此 jQuery 插件。

1. 安装指南

1.1 环境要求

• jQuery 库

1.2 下载插件

您可以从 GitHub 下载最新版本的 imgLiquid 插件。

1.3 引入插件

在 HTML 文件中引入 jQuery 库和 imgLiquid 插件：

<script src="js/jquery.min.js"></script>
<script src="js/imgLiquid-min.js"></script>

2. 使用说明

2.1 引入插件

在页面中引入 jQuery 库和 imgLiquid 插件。

2.2 初始化插件

在 JavaScript 中，使用以下代码初始化 imgLiquid 插件：

$(document).ready(function() {
    $(".imgLiquidFill").imgLiquid();
});

2.3 HTML 结构

创建一个包含图片的容器，并为其添加 imgLiquidFill 类：

<div class="imgLiquidFill imgLiquid" style="width:300px; height:200px;">
    <img alt="Woody" src="woody.jpg" />
</div>

2.4 查看效果

在浏览器中查看页面，您将看到图片被调整以适应容器。

3. 项目 API 使用文档

3.1 参数选项

以下是 imgLiquid 插件支持的参数选项：

• fill: 布尔值，默认为 true，是否填充容器。
• verticalAlign: 垂直对齐方式，可选值有 center、top、bottom、50%、10%。
• horizontalAlign: 水平对齐方式，可选值有 center、left、right、50%、10%。
• onStart: 开始调整大小时触发的回调函数。
• onFinish: 调整大小完成后触发的回调函数。
• onItemStart: 每个图片开始调整大小时触发的回调函数，参数包括索引、容器和图片对象。
• onItemFinish: 每个图片调整大小完成后触发的回调函数，参数包括索引、容器和图片对象。

3.2 HTML5 data 属性

您还可以通过 HTML5 data 属性覆盖 JavaScript 中的参数选项：

<div class="imgLiquidFill imgLiquid" style="width:300px; height:200px;"
    data-imgLiquid-fill="true"
    data-imgLiquid-horizontalAlign="center"
    data-imgLiquid-verticalAlign="50%">
    <img alt="Woody" src="woody.jpg" />
</div>

4. 项目安装方式

如前所述，您可以从 GitHub 下载最新版本的 imgLiquid 插件，并将其引入到您的项目中。同时，确保您的项目已引入 jQuery 库。