图片/图形
water-ripple 炫酷水波涟漪jQuery特效插件
PetitQ
water-ripple 是一款效果非常酷的模拟水波涟漪效果的 jQuery 插件。该水波涟漪特效使用的是 jQuery 而不是 canvas 来制作，它可以在一张平面图片上产生逼真的水波涟漪效果，并且可以使用鼠标和水波进行互动。
使用方法
使用这个水波涟漪效果先要引入 jQuery 和 ripple.js 文件。
也想出现在这里？联系我们吧
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/ripple.js"></script>
HTML 结构
可以直接在容器中插入一张图片：
<img id="ripple" src="image.jpg" />
或者作为背景图片来使用：
<div id="ripple" style="background-image:url(image.jpg);width:600px;height:300px;">
</div>
初始化插件
在页面加载完毕之后，可以通过下面的方法来初始化该水波涟漪插件。
<script type="text/javascript">
$(document).ready(function() {
$("#ripple").waterripple();
});
</script>
或者插入一些参数来初始化它。
<script type="text/javascript">
$("#ripple").waterripple({ arbitrary: 5000 });
</script>
配置参数
下面是该水波涟漪插件的一些可用参数：
arbitrary：类型：int，默认值 1000。产生随机水波的时间，单位毫秒。默认是每秒钟产生一个随机水波，设置为 0 关闭随机水波
riprad：类型：int，默认值 3。单个水波的半径
delay：类型：int，默认值 3。在重绘下一帧动画前的延时，单位毫秒
onclick：类型：boolean，默认值 false。是否允许鼠标点击时产生新的水波
onmove：类型：boolean，默认值 false。是否允许在鼠标滑过是产生新的水波
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
