Material Design鼠标点击波特效jQuery插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库

按钮的点击波效果：

			      
<button data-rippleria class="button">Click Me!</button>
<button data-rippleria class="button button-outline rippleria-dark">And Me!</button>

自定义动画曲线：

			     
<button data-rippleria 
  data-rippleria-color="rgba(100,178,53,.35)" 
  data-rippleria-duration="1000" 
  data-rippleria-easing="cubic-bezier(0.680, -0.380, 0.385, 1.650)" 
  class="btn btn-lg btn-default">Custom</button>

图片点击波效果：

<div class="text-center">
  <a style="display: inline-block;" id="rippleria" href="#">
    <img src="http://www.lovethispic.com/uploaded_images/15163-Pretty-Girl.jpg" alt="image">
  </a>
</div>

<script>
  function randInt(min, max) {
    var rand = min + Math.random() * (max - min)
    rand = Math.round(rand);
    return rand;
  }

  $('#rippleria').rippleria({
    // aniamtion speed
    duration: 750,
    // custom easing effect
    easing: 'linear',
    // custom color
    color: undefined
  });

  $('#rippleria').click(function(e) {
    e.preventDefault();
    $(this).rippleria('changeColor', 
      'rgba('+randInt(0,255)+','+randInt(0,255)+','+randInt(0,255)+',0.'+randInt(3,5));
  });
</script>