支持移动触摸的Material Design风格点击波特效jQuery插件

移动手机 点击波 Material Design 2016-01-01

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

支持IE10+

演示下载 979
使用方法

安装

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

1
$ bower i -S rippleria               

使用方法

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

1
2
3
<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属性即可。

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

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

1
2
3
4
5
<script>
    $(function() {
        $('.btn').rippleria();
    });
</script>               

配置参数

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

例如:

1
2
3
4
5
6
7
8
9
<script>
    $(function() {
        $('.btn').rippleria({
            color: 'yellow', // Wave color
            easing: 'ease-in', // CSS3 Timing Function
            duration: 1000 // Wave lifetime
        });
    });
</script>               

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

1
2
3
4
<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:用于制作平滑的点击波。

方法

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

1
2
3
4
5
6
7
<script>
    $(function() {
        $('.btn').rippleria("changeColor", "blue");
        $('.btn').rippleria("changeEasing", "ease-in-out");
        $('.btn').rippleria("changeDuration", "500");
    });
</script>               

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

本文转载请注明出处:http://www.zhuiye.com/detail_13.html