初始化插件

通过纯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 it′s 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);

});