插件 jQuery.ripples 中文 API 文档
插件 jQuery.ripples 中文 API 文档
使用 WebGL 为您的背景添加水波纹效果
源码 & 下载
- Github 地址：https://github.com/sirxemic/jquery.ripples
- 源码下载： -
- 效果演示： -
通过 WebGL 的强大功能，为 HTML 元素添加一层水，这将通过光标交互产生波动！
重要提示：此插件需要 WebGL 扩展 OES_texture_float（并且 OES_texture_float_linear 效果更佳），并且仅适用于同源图像。
用法
在包含 jQuery 之后，在页面末尾包含脚本，或者当您使用捆绑工具（如 Webpack 或 Browserify）时，只需将其导入到捆绑包中即可。
在元素上使用此插件的最快方法是确保元素具有 background-image 集合（当前仅支持 URL），然后按如下方式初始化插件：
$(selector).ripples();
（可选）您可以通过使用选项初始化来调整行为和外观（有关选项的完整列表，请参阅选项 secton）：
$(selector).ripples({
dropRadius: ...,
perturbance: ...,
...
});
该插件还有几种方法可以编程方式添加丢弃，显示，隐藏或删除效果等。有关详细信息，请参阅方法部分。
选项
| 名称 | 类型 | 默认 | 描述 |
|---|---|---|---|
| IMAGEURL | 串 | 空值 | 要用作背景的图像的 URL。如果没有，插件将尝试使用计算的 background-imageCSS 属性的值。也接受数据 URI。 |
| dropRadius | 浮动 | 20 | 通过在画布上单击或移动鼠标而产生的拖放的大小（以像素为单位）。 |
| 扰动 | 浮动 | 0.03 | 基本上由波纹引起的折射量。0 表示没有折射。 |
| 解析度 | 整数 | 256 | 要呈现的 WebGL 纹理的宽度和高度。此值越大，渲染越平滑，涟漪传播越慢。 |
| 互动 | 布尔 | 真正 | 鼠标点击和鼠标移动是否会触发效果。 |
| crossOrigin | 串 | “” | 用于受影响图像的 crossOrigin 属性。有关更多信息，请参阅 MDN。 |
方法
下降
调用 $(selector).ripples(‘drop’, x, y, radius, strength) 在元素的相对坐标（x，y）处手动添加一个 drop。radius 控制下降的大小和 strength 产生的纹波的幅度。
破坏
调用 $(selector).ripples(‘destroy’) 从元素中删除效果。
隐藏 / 显示
调用。ripples(‘hide’) 并。ripples(‘show’) 切换效果的可见性。隐藏它也将有效地暂停模拟。
暂停 / 开始
调用 $(selector).ripples(‘pause’) 并。ripples(‘play’) 切换模拟的状态。
set
调用 $(selector).ripples(‘set’, name, value) 以更新效果的属性。可以更新的属性是：
- dropRadius
- perturbance
- interactive
- imageUrl（设置图像 URL 将更新用于效果的背景图像，但 background-imageCSS 属性将不受影响）
- crossOrigin（设置此项将不会有任何影响，直到 imageUrl 更改）
updateSize
当窗口的宽度或高度发生变化时，效果会自动调整大小。当元素的尺寸发生变化时，您需要调用 $(selector).ripples(‘updateSize’) 以相应地更新效果的大小。
