个人博客：凌霄的博客
前言
作为一个 md 党，我很喜欢 md 的涟漪效果，百度找到的源码都太复杂，于是动手自己写了一个。
效果
demo.gif
开始
思路
点击时定位鼠标的位置，以鼠标为涟漪中心，让涟漪逐渐扩大，超出的地方隐藏
介绍
涟漪的半径默认为元素的宽度或高度（最大的那一方）
涟漪的颜色，速度可以自行修改
代码
$(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
欢迎评论，如有错误请指出，以免误导更多人
