MENU▼

JQuery水波纹插件

GitHub
DEMO官方演示用的google的JQ库

代码:

$('body').ripples({
    resolution: 512, //波纹扩散范围
    dropRadius: 20, //波纹圈宽度px
    perturbance: 0.04, //波纹波动强度
});

需要你绑定的元素上有背景图片(仅支持url())。


选项:

名称类型默认值描述
imageUrlstringnull设置图像的URL作为背景。优先使用CSS背景图像。
dropRadiusfloat20波纹圈宽度
perturbancefloat0.03波纹波动强度
resolutioninteger256波纹扩散范围
interactivebooltrue鼠标是否触发效果
crossOriginstring""跨域图片(不清楚具体用途,详情点击:MDN

方法
[ drop ]
落下效果、雨滴效果
示例代码:

$('.main').ripples({
    resolution: 128,
    dropRadius: 10,
    perturbance: 0.04,
    interactive: false
});

// 循环刷新随机位置出现
setInterval(function() {
    var $el = $('.main');
    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);


[ destroy ]
删除绑定效果的元素
示例代码:

$('.main').ripples('destroy');


[ hide / show ]
隐藏和显示。隐藏后效果会暂停,显示后效果会播放
示例代码:

$('.main').ripples('hide');
$('.main').ripples('show');


[ pause / play ]
暂停和播放
示例代码:

$('.main').ripples('pause');
$('.main').ripples('play');


[ set ]
更新选项参数
示例代码:

$('.main').ripples('set', 选项名称, 选项值);

可以更新的选项有:

  • dropRadius
  • perturbance
  • interactive
  • imageUrl(只更新imageUrl设置的背景图片,CSS背景不变。)
  • crossOrigin (设置这个imageUrl改变之前不会有任何影响 [ 翻译的,不清楚用途 ])

请为这篇文章评分:
( 这篇文章尚未评分 )
如果帮上忙了,赏po猪点小钱钱吧!