特效介绍
基于jQuery和canvas的lake.js图片倒影动态水波纹插件,支持设置水波纹的大小、速度、数量,水波纹非常逼真。lake.js使用简单。
注意:必须在服务器环境下才能看到效果,直接打开html会报错。
使用方法
1、引入jQuery和lake.js库:
<script src="js/jquery.js"></script> <script src="js/lake.js"></script>2、加入图片,图片要设置不显示,canvas会自动将图片画到画布上:
<img id="lake-img" src="images/lake.png" style="display: none;"/>3、调用插件
$('#lake-img').lake({ 'speed': 1.5, 'waves': 6, 'scale': 0.5 });4、参数详解:
speed:水波纹动画的速度
waves:水波纹数量
scale:水波纹大小