引用文件
<link rel="stylesheet" type="text/css" href="waves.css" />
<script type="text/javascript" src="waves.js"></script>
添加元素
<a href="#" class="button">Click Here</a>
JS 附加
<script type="text/javascript">
Waves.attach('.button');
</script>
附加效果样式
Waves.attach('.button', ['waves-button', 'waves-float']);
.waves-button 圆角按钮样式
.waves-float 点击产生浮动阴影效果
.waves-circle 圆形样式
.waves-block 添加 display: block; 风格
初始化
Waves.init();
初始化配置(可选)
var config = {
// 水波纹持续时间 (in milliseconds)
duration: 500,
// Delay showing Waves effect on touch
// and hide the effect if user scrolls
// (0 to disable delay) (in milliseconds)
delay: 200
};
Waves.init(config);
移除风格
Waves.attach('.button', null);
水波纹效果控制
var options = {
wait: 1000, // ms 等待时间后消失
position: { // 在元素里的位置
x: 20, // px
y: 20 // px
}
};
Waves.ripple('.button', options);
移除效果
Waves.calm('.button');
元素 Hover 鼠标效果
$('.button').mouseenter(function() {
Waves.ripple(this, {wait: null});
}).mouseleave(function() {
Waves.calm(this);
});