按钮图标
Material Design风格点击波特效jQuery插件
PetitQ
rippleria 是一款可以在移动触摸设备和桌面设备上使用的 Material Design 风格点击波特效 jQuery 插件。它支持按钮、图片，甚至是其它 HTML 标签，如 H1 标题等的点击波效果。
使用方法：
使用该点击波特效插件需要引入 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',
easing: 'ease-in',
duration: 1000
});
});
</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
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
