jQuery Rippleria – 涟漪点击效果jQuery插件

用法

在头部分加载样式表 jquery.rippleria.css ，在 jQuery 库后加载 jquery.rippleria.js 。

<link rel="stylesheet" href="/path/to/jquery.rippleria.css">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="/path/to/jquery.rippleria.js"></script>

将 data-rippleria 属性添加到要实现涟漪点击效果的DOM元素种。

<button data-rippleria>Default</button>

使用 html5 数据属性自定义涟漪点击效果。

<button data-rippleria 
  data-rippleria-color="blue" 
  data-rippleria-easing="ease-in" 
  data-rippleria-duration="5000">
  Click me
</button>

你还可以对任何块元素应用涟漪点击效果，并通过 JavaScript 传递选项。

$('.selector').rippleria({

  // 动画速度
  duration: 750,

  // 定制 easing effect
  easing: 'linear',

  // 定制颜色
  color: undefined

  // 启用自动添加 .rippleria-dark 类到深色元素。
  detectBrightness: true
});

$('.selector').rippleria("changeDuration", "500");
$('.selector').rippleria("changeEasing", "ease-in-out");
$('.selector').rippleria("changeColor", "blue");