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

rottengeek 发布于2019-08-29 12:31 / 1139人阅读

摘要：个人博客凌霄的博客前言作为一个党，我很喜欢的涟漪效果，百度找到的源码都太复杂，于是动手自己写了一个。

个人博客：凌霄的博客

前言

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

效果

开始思路

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

介绍

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

代码

$(function(){
  $(".ripple").click(function(e){
    if ($(this).find("#wave").length){
      $(this).find("#wave").remove();
    }
    $(this).append("");
    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

项目地址

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

GPU云服务器云服务器 material-design material-design-lite js实现f11的效果 jQuery打字效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111961.html

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

摘要：个人博客凌霄的博客前言作为一个党，我很喜欢的涟漪效果，百度找到的源码都太复杂，于是动手自己写了一个。个人博客：凌霄的博客前言作为一个 md 党，我很喜欢 md 的涟漪效果，百度找到的源码都太复杂，于是动手自己写了一个。效果 showImg(https://segmentfault.com/img/remote/1460000009254787?w=304&h=161); 开始 ...

vslam 2019-08-20 16:13 评论0 收藏0
jQuery数十行代码实现Material Design的涟漪效果

摘要：个人博客凌霄的博客前言作为一个党，我很喜欢的涟漪效果，百度找到的源码都太复杂，于是动手自己写了一个。个人博客：凌霄的博客前言作为一个 md 党，我很喜欢 md 的涟漪效果，百度找到的源码都太复杂，于是动手自己写了一个。效果 showImg(https://segmentfault.com/img/remote/1460000009254787?w=304&h=161); 开始 ...

legendaryedu 2019-08-01 16:44 评论0 收藏0
【教程】React 实现 Material Design 中涟漪（Ripple）效果

摘要：前言推出已有接近年，大家对触摸涟漪应该不陌生简单来说就是一个水波纹效果见下图。现已开源到，以及相应的。这样一来，这些事件都会发生在组件上，问题解决。和这个函数负责计算事件发生的坐标，的大小等信息。就会构建一个，然后将其放入中。前言 Material Design 推出已有接近4年，大家对触摸涟漪（Ripple）应该不陌生,简单来说就是一个水波纹效果（见下图）。前段时间接触了 mate...

hzx 2019-08-22 17:11 评论0 收藏0
UI大全：前端UI框架集合（持续更新，当前32个）

摘要：简洁直观强悍的前端开发框架，让开发更迅速简单。是一套基于的前端框架。首个版本发布于年金秋，她区别于那些基于底层的框架，却并非逆道而行，而是信奉返璞归真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

only_do 2019-08-22 10:47 评论0 收藏0