这是一款HTML5 canvas水波纹动画特效。该水波纹动画以插件的形式进行编写，可以是纯js插件，或通过jquery插件来进行调用。它能够制作出逼真的水波纹动画效果。/p> 使用方法

在页面中引入jquery和jquery.waterrippleeffect.min.js文件。

<script src='path/to/js/jquery.min.js'></script> <script src='path/to/js/jquery.waterrippleeffect.min.js'></script> HTML结构

使用一个<div>作为该水波纹动画特效的HTML结构：

<div></div> 初始化插件

通过纯js的方式来调用该水波纹动画效果的代码如下：

function init() { //Settings - params for WaterRippleEffect var settings = { image: './img/SwimmingPool.jpg',//背景图片 rippleRadius: 3,//radius of the ripple width: 480,//width height: 480,//height delay: 1,//if auto param === true. 1 === 1 second delay for animation auto: true//if auto param === true, animation starts on its own }; //------------------------------------------------------------------------ //standalone //初始化 var waterRippleEffect = new WaterRippleEffect( document.getElementById( 'holder' ), settings ); document.getElementById( 'holder' ).style.cursor = 'pointer'; //鼠标点击事件 document.getElementById( 'holder' ).addEventListener( 'click', function( e ) { var mouseX = e.layerX; var mouseY = e.layerY; waterRippleEffect.disturb( mouseX, mouseY ); } ); //鼠标移动事件 document.getElementById( 'holder' ).addEventListener( 'mousemove', function( e ) { var mouseX = e.layerX; var mouseY = e.layerY; waterRippleEffect.disturb( mouseX, mouseY ); } );

通过jquery插件的方式来调用该水波纹动画效果的代码如下：

$( '#holder' ).waterRippleEffect( settings ); $( '#holder' ).css( 'cursor', 'pointer' ); //鼠标点击事件 $( '#holder' ).click( function( e ) { var mouseX = e.pageX - $( this ).offset().left; var mouseY = e.pageY - $( this ).offset().top; $( '#holder' ).waterRippleEffect( "disturb", mouseX, mouseY ); } ); //鼠标移动事件 $( '#holder' ).mousemove( function( e ) { var mouseX = e.pageX - $( this ).offset().left; var mouseY = e.pageY - $( this ).offset().top; $( '#holder' ).waterRippleEffect( "disturb", mouseX, mouseY ); } );

该HTML5 canvas水波纹动画特效的官方地址为：