waves.js 点击水波纹特效

引用文件

<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);
});

演示地址：http://fian.my.id/Waves

转载请注明出处：吖Go博客 » waves.js 点击水波纹特效