14

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

逸风 2017-05-02 发布于前端 lx.nextdev.cn

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

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

2017-05-02 发布,来源:lx.nextdev.cn

个人博客:凌霄的博客

前言

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

效果

demo.gif

开始

思路

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

介绍

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

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
$(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

项目地址

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

1k 浏览 60 收藏 报告 阅读模式
载入中...