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

legendaryedu 发布于2019-08-01 16:44 / 994人阅读

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

个人博客：凌霄的博客

前言

作为一个 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

项目地址

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

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

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

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

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

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

rottengeek 2019-08-29 12:31 评论0 收藏0
jQuery数十行代码实现Material Design的涟漪效果

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

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

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

hzx 2019-08-22 17:11 评论0 收藏0
布局 - 收藏集 - 掘金

摘要：如可伸缩布局支持集成掘金前言前几天看到官方的博客介绍了开源的一个强大的布局，看见第一眼我心里的想法是，卧槽，居然有这么一个强大的布局。 Android AutoLayout 全新的适配方式堪称适配终结者 - Android - 掘金转载请标明出处： http://blog.csdn.net/lmj62356...；本文出自:【张鸿洋的博客】一、概述相信Android的开发者对...

ziwenxie 2019-06-25 11:22 评论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