jQuery數十行代碼實現Material Design的漣漪效果

時間 2019-12-05

標籤 jquery 數十代碼實現 material design 漣漪效果欄目 JQuery 简体版

原文原文鏈接

我的博客：凌霄的博客css

前言

做爲一個 md 黨，我很喜歡 md 的漣漪效果，百度找到的源碼都太複雜，因而動手本身寫了一個。git

效果

開始

思路

點擊時定位鼠標的位置，以鼠標爲漣漪中心，讓漣漪逐漸擴大，超出的地方隱藏web

介紹

漣漪的半徑默認爲元素的寬度或高度（最大的那一方）
漣漪的顏色，速度能夠自行修改app

代碼

$(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"
    });
  });
});