jQuery Ripples 是一款利用 WebGL 技术实现的水波涟漪特效插件，支持鼠标互动。可提升页面视觉效果和用户体验，需使用同源或允许跨域的图片。调用方法：引入 jQuery 和 jquery.ripples.js 文件，在页面元素上添加 CSS 背景图片，使用特定方法调用插件。可配置参数包括分辨率、涟漪半径、干扰效果等。
常有人问 gebilaoli.com 首页的水波纹特效是如何实现的，老李通常会让他们去搜 jQuery Ripples。
但是很多人搜到了也不知道怎么用，甚至还有人不会搜...
于是还是水一篇文章分享一下吧。
jQuery Ripples 是一款非常好玩的 jQuery 特效插件，可以为网页元素添加水波涟漪效果。它利用 WebGL 技术，实现了流畅的水波动画，并且支持鼠标互动，用户可以通过鼠标的移动和点击与水波进行互动。这种效果不仅能提升页面的视觉吸引力，还能带来更好的用户体验。如果你有兴趣，可以在你的项目中尝试使用这个插件，给你的网页增添一些动态元素！
需要注意的是，该插件必须使用同源的图片，或者是图片允许跨域才能正常工作。
使用方法
引入 jQuery 和 jquery.ripples.js 文件
Markup<script src="jquery.min.js" type="text/javascript"></script><script type="text/javascript" src="jquery.ripples.js"></script>代码来自：https://yeelz.com/post/574.html
调用插件
页面面初始化完成后使用下面的方法调用，注意要调用水波纹效果的元素上要有一张 CSS 背景图片
JavaScript" style="box-sizing: border-box; color: rgb(255, 255, 255); background-color: transparent; display: inline-block; position: absolute; inset: 0px 0px auto auto; width: auto; height: auto; font-size: 0.8em; border-radius: 0px 0px 0px 5px; padding: 0.5em 0.8em; text-shadow: none; z-index: 1; box-shadow: none; transform: none; border: 0px;">JavaScript
JavaScript//在<body>元素上调用该插件$('body').ripples({
resolution: 512,
dropRadius: 20,
perturbance: 0.04,});代码来自：https://yeelz.com/post/574.html暂停和播放水波涟漪效果
JavaScript$('body').ripples('pause');$('body').ripples('play');代码来自：https://yeelz.com/post/574.html添加水滴效果
JavaScript$('body').ripples("drop", x, y, radius, strength);代码来自：https://yeelz.com/post/574.html比如水滴自动落下
JavaScriptsetInterval(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);代码来自：https://yeelz.com/post/574.html配置参数
Markupresolution：分辨率。默认值：256。 dropRadius：水波涟漪的半径。默认值：20。 perturbance：干扰效果。默认值：0.03。 interactive：是否可以用鼠标进行互动。默认值：false。
资源下载
推荐本站淘宝优惠价购买喜欢的宝贝:
本文链接：https://hqyman.cn/post/10250.html 非本站原创文章欢迎转载，原创文章需保留本站地址！
微信支付宝扫一扫，打赏作者吧～休息一下~~
萌ICP备20248119号
