特性
- 方便使用,可使用自定义属性 data-ripple 来实例化插件
- 可自定义水波纹的标签及其Class Name
- 同时支持 jQuery 和 Zepto 库
这是类似 Material Design 在点击后出现水波纹的效果,结合了 CSS3 动画实现的特效。
<link rel="stylesheet" href="../css/ripple.css" />
<script src="../js/zepto.min.js"></script>
<script src="../js/ripple.js"></script>
<button class="ripple-wrapper">水波纹按钮</button>
注:Class Name "ripple-wrapper" 为必须的。
$(document).ready(function() {
$('.ripple-wrapper').ripple();
});
$(document).ready(function() {
$('#btn-01').ripple();
});
<button class="ripple-wrapper button button1" data-ripple>按钮</button>
$('.new-list a').ripple();
参数 | 默认值 | 说明 |
---|---|---|
tagName | 'span' |
水波纹标签名称 |
className | 'ripple' |
水波纹标签的 Class Name |