AI正在生成摘要
jQuery Ripples 是一款利用 WebGL 技术实现的水波涟漪特效插件，支持鼠标互动。可提升页面视觉效果和用户体验，需使用同源或允许跨域的图片。调用方法：引入 jQuery 和 jquery.ripples.js 文件，在页面元素上添加 CSS 背景图片，使用特定方法调用插件。可配置参数包括分辨率、涟漪半径、干扰效果等。
常有人问 gebilaoli.com 首页的水波纹特效是如何实现的，老李通常会让他们去搜 jQuery Ripples。
但是很多人搜到了也不知道怎么用，甚至还有人不会搜...
于是还是水一篇文章分享一下吧。
jQuery Ripples 是一款非常好玩的 jQuery 特效插件，可以为网页元素添加水波涟漪效果。它利用 WebGL 技术，实现了流畅的水波动画，并且支持鼠标互动，用户可以通过鼠标的移动和点击与水波进行互动。这种效果不仅能提升页面的视觉吸引力，还能带来更好的用户体验。如果你有兴趣，可以在你的项目中尝试使用这个插件，给你的网页增添一些动态元素！
需要注意的是，该插件必须使用同源的图片，或者是图片允许跨域才能正常工作。
使用方法
引入 jQuery 和 jquery.ripples.js 文件
<script src="jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="jquery.ripples.js"></script>
调用插件
页面面初始化完成后使用下面的方法调用，注意要调用水波纹效果的元素上要有一张 CSS 背景图片
//在<body>元素上调用该插件
$('body').ripples({
resolution: 512,
dropRadius: 20,
perturbance: 0.04,
});暂停和播放水波涟漪效果
$('body').ripples('pause');
$('body').ripples('play');添加水滴效果
$('body').ripples("drop", x, y, radius, strength);比如水滴自动落下
setInterval(function() {
var $el = $('body');
var x = Math.random() * $el.outerWidth();
var y = Math.random() * $el.outerHeight();
var dropRadius = 20;
var strength = 0.04 + Math.random() * 0.04;
$el.ripples('drop', x, y, dropRadius, strength);
}, 400);配置参数
resolution：分辨率。默认值：256。 dropRadius：水波涟漪的半径。默认值：20。 perturbance：干扰效果。默认值：0.03。 interactive：是否可以用鼠标进行互动。默认值：false。
