点击任意DOM元素添加涟漪波浪动画效果jquery插件

演示  website 下载

插件介绍

这是一款轻量级的jQuery插件，触发点击时可以将涟漪特效应用到html中任何DOM元素上。

使用方法

1. 在html页面中插入jquery库和插件文件。

<!-- jQuery -->
<script src="jquery.min.js"></script>
<!-- Waves.js plugin -->
<link rel="stylesheet" href="jquery-waves.css" />
<script src="jquery-waves.js"></script>

2. 将CSS类waves-effect或data-waves属性添加到要启用涟漪效果的元素中。

<button class="waves-effect">
  Click/Tap Me
</button>

<button data-waves>
  Click/Tap Me
</button>

3. 使用waves-color，data-waves-background-color属性自定义涟漪颜色：

<button data-waves data-waves-background-color="rgba(0, 0, 0, 0.35)">
  Click/Tap Me
</button>

<button class="waves-effect waves-light bg-black">
  Light
</button>
<button class="waves-effect waves-red">
  Red
</button>
<button class="waves-effect waves-yellow">
  Yellow
</button>
<button class="waves-effect waves-orange">
  Orange
</button>
<button class="waves-effect waves-purple">
  Purple
</button>
<button class="waves-effect waves-green">
  Green
</button>
<button class="waves-effect waves-teal">
  Teal
</button>

4. 随机颜色:

<button data-waves data-waves-background-color="RANDOM">
  Click/Tap Me
</button>

5. 自定义不透明度。

<button data-waves data-waves-background-color="black" data-waves-opacity="0.55">
  Click/Tap Me
</button>

6. 自定义动画的持续时间（毫秒）。默认值：800。

<button data-waves data-waves-duration="500">
  Click/Tap Me
</button>

7. 您还可以使用JavaScript将涟漪效果应用于元素：

$('#element').click(function () {
  $(this).waveEffect(
    50, // x position
    80, // y position
    'red', // background color
    1, // opacity
    2000, // duration
    function () { } // onComplete callback
  );
});