在页面中引入jquery和jquery.waterrippleeffect.min.js文件。
<script src='path/to/js/jquery.min.js'></script> <script src='path/to/js/jquery.waterrippleeffect.min.js'></script>
使用一个<div>作为该水波纹动画特效的HTML结构:
<div id="holder"></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 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); });
可不可以不要背景图!!!!能不能改变水波的颜色!!知道的大侠请说下,在线等,挺急的。