基于Canvas的jQuery水波涟漪插件

当前位置:主页 > Html5库 > html5 canvas > 基于Canvas的jQuery水波涟漪插件
基于Canvas的jQuery水波涟漪插件
分享:

    插件介绍

    jquery.ripple.js是一款小巧的基于HTML5 Canvas的水波涟漪jQuery插件。该插件可以在一张图片上,通过鼠标点击制作出逼真的水波涟漪效果。

    浏览器兼容性

    浏览器兼容性
    时间:2016-07-12
    阅读:
简要教程

jquery.ripple.js是一款小巧的基于HTML5 Canvas的水波涟漪jQuery插件。该插件可以在一张图片上,通过鼠标点击制作出逼真的水波涟漪效果。

水波涟漪特效

使用方法

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

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.ripple.js" type="text/javascript"></script>                  
                
HTML结构

该插件可以为任何一张图片制作水波涟漪特效。

<img id="target" src="img/1.jpg">  
                
初始化插件

在页面DOM元素加载完毕之后,可以通过ripple()方法来初始化该水波涟漪特效插件。

$(function() {
    $("#target").ripple();
});
                

jquery.ripple.js水波涟漪插件的github地址为:https://github.com/jtiscione/ripple

网友评论