rippleria是一款可以在移动触摸设备和桌面设备上使用的Material Design风格点击波特效jQuery插件。它支持按钮、图片，甚至是其它HTML标签，如H1标题等的点击波效果。

安装

你可以使用bower来安装该点击波插件。

$ bower i -S rippleria

使用方法

使用该点击波特效插件需要引入jQuery、jquery.rippleria.js和jquery.rippleria.css文件。

<link rel="stylesheet" href="dist/jquery.rippleria.min.css">
<script src="dist/jquery.min.js"></script>
<script src="dist/jquery.rippleria.min.js"></script>
HTML结构

如果要为按钮使用点击波特效，你可以直接在按钮上添加data-rippleria属性即可。

<button class="btn btn-primary btn-lg" data-rippleria>Click me</button>
初始化插件

你也可以通过JS的方式来初始化该点击波特效。

<script>
    $(function() {
        $('.btn').rippleria();
    });
</script>

配置参数

  • color：波的颜色，可以是任何合法的CSS颜色。
  • easing：CSS3 Timing函数。
  • duration：波的持续时间。

例如：

<script>
    $(function() {
        $('.btn').rippleria({
            color: 'yellow', // Wave color
            easing: 'ease-in', // CSS3 Timing Function
            duration: 1000 // Wave lifetime
        });
    });
</script>

你也可以直接在元素上使用data属性来定义这些参数。

<button class="btn btn-primary btn-lg" data-rippleria 
    data-rippleria-color="red" 
    data-rippleria-easing="ease-in" 
    data-rippleria-duration="1000">Click me</button>

你还可以使用下面的class类。

  • .rippleria-dark：元素背景较亮时使用该class。
  • .rippleria-blured：用于制作平滑的点击波。

方法

该点击波特效可用的方法有：

<script>
    $(function() {
        $('.btn').rippleria("changeColor", "blue");
        $('.btn').rippleria("changeEasing", "ease-in-out");
        $('.btn').rippleria("changeDuration", "500");
    });
</script>

Rippleria点击波特效的github地址为：https://github.com/nsept/rippleria