jQuery数十行代码实现Material Design的涟漪效果

个人博客：凌霄的博客

前言

作为一个 md 党，我很喜欢 md 的涟漪效果，百度找到的源码都太复杂，于是动手自己写了一个。

效果

开始

思路

点击时定位鼠标的位置，以鼠标为涟漪中心，让涟漪逐渐扩大，超出的地方隐藏

介绍

涟漪的半径默认为元素的宽度或高度（最大的那一方）
涟漪的颜色，速度可以自行修改

代码

$(function(){
  $(".ripple").click(function(e){
    if ($(this).find("#wave").length){
      $(this).find("#wave").remove();
    }
    $(this).append("<div id='wave'></div>");
    var wave=$(this).find("#wave");
    wave.css({
      "display": " block",
      //涟漪的颜色
      "background": " rgba(0, 0, 0, 0.3)",
      "border-radius": " 50%",
      "position": " absolute",
      "-webkit-transform": " scale(0)",
      "transform": " scale(0)",
      "opacity": " 1",
      //涟漪的速度
      "transition": " all 0.7s",
      "-webkit-transition": " all 0.7s",
      "-moz-transition": " all 0.7s",
      "-o-transition": " all 0.7s",
      "z-index": " 1",
      "overflow": " hidden",
      "pointer-events": " none"
    });
    // 获取ripple的宽度和高度
    waveWidth = parseInt($(this).outerWidth());
    waveHeight = parseInt($(this).outerHeight());

    if(waveWidth < waveHeight){
      var R= waveHeight;
    }else {
      var R= waveWidth;
    }
    wave.css({
      "width":(R*2)+"px",
      "height":(R*2)+"px",
      "top": (e.pageY -$(this).offset().top - R)+'px',
      "left": ( e.pageX -$(this).offset().left -R)+'px',
      "transform":"scale(1)",
      "-webkit-transform":"scale(1)",
      "opacity":"0"
    });
  });
});

使用方法

给你的元素添加 .ripple 类

结语

效果是用 jQuery 实现的，不过听说大家都抛弃 jQuery 了，QAQ

项目地址

欢迎评论，如有错误请指出，以免误导更多人