Material Design风格纯js按钮点击波特效

演示效果

html部分：　

　　<button data-ripple>　Demo button 6 </button>

css部分：

　　.ripple-container {}

　　.ripple-container .ripple {
　　　　background-color: rgba(255, 255, 255, 0.4);
　　　　animation: ripple 2s forwards cubic-bezier(0, 0, 0.2, 1);
　　}

　　@keyframes ripple {
　　　　0% {
　　　　　　transform: scale(0);
　　　　　　opacity: 1;
　　　　}
　　　　80% {
　　　　　　transform: scale(1);
　　　　}
　　　　100% {
　　　　　　opacity: 0;
　　　　}
　　}

js部分：

　　<script src="ripple.js"></script>

　　<script type="text/javascript">
　　　　Array.prototype.forEach.call(document.querySelectorAll('[data-ripple]'), function(element) {
　　　　　　new RippleEffect(element); 
　　　　});
　　</script>

完整demo：　

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="ripple.css" />
<style>
button{
outline: none;
border: none;
cursor: pointer;
}
button {
background-color: #3e3e3e;
padding: 5px 30px;
font: 14px/30px "微软雅黑";
color: #fff;
display: block;
border-bottom: 1px solid #ccc;
}
button:hover{
background-color: #525252;
}
</style>
</head>

<body>
<button data-ripple>
Demo button 1
</button>
<button data-ripple>
Demo button 2
</button>
<button data-ripple>
Demo button 3
</button>
<button data-ripple>
Demo button 4
</button>
<button data-ripple>
Demo button 5
</button>
<button data-ripple>
Demo button 6
</button>
</body>
<script src="ripple.js"></script>
<script>
Array.prototype.forEach.call(document.querySelectorAll('[data-ripple]'), function(element) {
new RippleEffect(element);
});
</script>
<script>
var btns = document.querySelectorAll("button");
var len = btns.length;
for(var i=0; i<len; i++){
btns[i].index = i;
btns[i].onclick = function(){
//console.log(this.index);
for(var j=0; j<len; j++){
btns[j].style.background = "#3e3e3e";
}
this.style.background = "#b63745";
}
}
</script>
</html>

js点击按钮button效果（波效果）的更多相关文章

  1. Bootstrap的js插件之按钮(button)

    1)属性: data-loading-text="载入中..."--使button呈现载入状态: data-toggle="button"--使按钮可以切换状态 ...

  2. JS点击按钮打开新的独立页面

    工作中遇到需要点击按钮弹出一个独立的页面,并显示指定内容的问题,查了一些资料后,得到以下方法: window.open('locationPage.html', '_blank', 'height=1 ...

  3. html js点击按钮滚动跳转定位到页面指定位置（DIV）的方法代码

    一:通过html锚点实现滚动定位到页面指定位置(DIV):    如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的d ...

  4. JS点击按钮弹出窗口

    由于没有系统学习过JS,遇到一个需求:点击按钮,弹出一个独立的窗口. 在网上百度了一下,并没有找到满意的结果,最重要的是各种方法很复杂.最终,仔细研究了一下,原来只是需要只要一个简单的函数就能满足自己 ...

  5. js点击按钮为元素随机字体颜色和背景色

    文章地址 https://www.cnblogs.com/sandraryan/ 写两个button和一个div,点击按钮分别改变背景色和前景色(字体颜色).产生的是一个随机颜色. <!DOCT ...

  6. js点击按钮触发事件的方法

    <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <input id= ...

  7. winfrom 点击按钮button弹框显示颜色集

    1.窗体托一个按钮button: 2.单击事件: private void btnForeColor_Click(object sender, EventArgs e) { using (ColorD ...

  8. jquery 实现点击按钮后出现倒计时效果（用于实现发送手机验证码、邮箱验证码）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. js点击更多显示更多内容效果

    我写了一个简单的分段显示插件,用法很简单:1,把你要分面显示的内容的容器元素增加一个class=showMoreNChildren,并增加一个自定义属性pagesize="8" 这 ...

随机推荐

  1. 201777010217-金云馨《面向对象程序设计（java）》第十六周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  2. 283.移动零 关于列表list与remove原理*****（简单）

    题目: 给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序. 注意,该题目要求不开辟行的数组空间,在原数据上进行操作. 示例: 输入: [0,1,0,3,12 ...

  3. JDOJ 1775: 求N!中0的个数

    JDOJ 1775: 求N!中0的个数 JDOJ传送门 Description 求N!结果中末尾0的个数 N! = 1 * 2 * 3 ....... N Input 输入一行,N(0 < N ...

  4. 学习：反调试之ZwQueryInformationProcess

    SetUnhandledExceptionFilter触发条件:1.当程序有异常,且没相应的处理 2.没有人进行反调试,满足这两个条件的时候,就会其中传输的参数(实则就是一个异常处理函数) 来进行处理 ...

  5. CSS/H5保留显示 textarea输入的空格和换行

    .show { white-space: pre-wrap; }

  6. Codeforces Round #606 (Div. 2, based on Technocup 2020 Elimination Round 4) 题解

    Happy Birthday, Polycarp! Make Them Odd As Simple as One and Two Let's Play the Words? Two Fairs Bea ...

  7. 【2019.7.15 NOIP模拟赛 T2】与非树（nand）（树形DP）

    树形\(DP\) 实际上,这道题应该不是很难. 我们设\(f_{x,i,j}\)表示在以\(x\)为根的子树内,原本应输出\(i\),结果输出了\(j\)的情况数. 转移时,为了方便,我们先考虑与,再 ...

  8. windows7 - windows10开启802.1x md5质询

    (win7 win10通用)20190324   全程不需重启 注:如果导入后没有看到md5,那得去注册表看看是否真的有键值(我的一开始提示成功,但是注册表里看不到,后来发现复制时候多了一些不可见的字 ...

  9. 【微信小程序】 小程序中的递归运算/二分查找算法/Maximum call stack size exceeded

    摘要: 小程序中的递归运算/二分查找算法/Maximum call stack size exceeded 场景:最近做一个车贷计算器, 其中存在一个公式如下: /**** 总金额 * 月利率 * ( ...

  10. sprintboot+mybatis+@Mapper中in的使用方法

    错误的使用方法: @Select("select goods_sn from ${tableName} where goods_sn in (#{skuStr})") public ...