图片效果-jQuery炫酷水波涟漪特效插件 | 蓝文资源库 – 海量优质开发设计资源分享平台

water-ripple是一款效果非常酷的模拟水波涟漪效果的jQuery插件。该水波涟漪特效使用的是jQuery而不是canvas来制作，它可以在一张平面图片上产生逼真的水波涟漪效果，并且可以使用鼠标和水波进行互动。

使用这个水波涟漪效果先要引入jQuery和ripple.js文件。

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/ripple.js"></script>                

可以直接在容器中插入一张图片：

<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>                

下面是该水波涟漪插件的一些可用参数：

郑重声明：

1 本资源来源于互联网，资源的版权归资源原作者所持有，受《中华人民共和国著作权法》等相关法律保护。

2 由于无法和原作者取得联系，所以上传的部分资源无法先通过原作者的同意就分享给大家了，如本资源侵犯了您（原作者）的权益，请联系我们（微信号 xiaohaimei1989），我们会立马删除您的资源，并向您表达诚挚的歉意！

3 本站是一个公益型网站，分享资源的目的在于传播知识，分享知识，收取一点点打赏的辛苦费是用于网站的日常运营开支，并非用于商业用途。

4 本站资源只提供学习和参考研究使用，使用过后请在第一时间内删除。本站不承担资源被单位或个人商用带来的法律责任。