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. 201871010126 王亚涛 《面向对象程序设计 Java》 第十五周学习总结

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

  2. MyBatisPlus快速入门

    MyBatisPlus快速入门 官方网站 https://mp.baomidou.com/guide 慕课网视频 https://www.imooc.com/learn/1130 入门 https:/ ...

  3. zz扔掉anchor！真正的CenterNet——Objects as Points论文解读

    首发于深度学习那些事 已关注写文章   扔掉anchor!真正的CenterNet——Objects as Points论文解读 OLDPAN 不明觉厉的人工智障程序员 ​关注他 JustDoIT 等 ...

  4. python的设计模式之MVC模式

    模型-视图-控制器模式 关注点分离(Separation of Concerns,SoC)原则是软件工程相关的设计原则之一.SoC原则背后的思想是将一个应用切分成不同的部分,每个部分解决一个单独的关注 ...

  5. [LeetCode] 45. Jump Game II 跳跃游戏之二

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...

  6. java、ajax 跨域请求解决方案（'Access-Control-Allow-Origin' header is present on the requested resource. Origin '请求源' is therefore not allowed access.）

      1.情景展示 ajax调取java服务器请求报错 报错信息如下: 'Access-Control-Allow-Origin' header is present on the requested ...

  7. VIPKID:笔试题（数组中和为0的一对数的数量，十进制转二进制中1的个数）

    1. 求数组中的和为0 的一对数的数量 注意,需要用到set import java.util.Scanner; public class Main{ public static void main( ...

  8. （十）golang--运算符

    1.算术运算符 + -  * / % ++ -- 使用细节:(1)对于"/"号,整数除和小数除的区别: (2)++和--只能独立使用,即a=a++是不允许的:没有++a和--a:i ...

  9. 深入理解C语言 - 指针详解

    一.什么是指针 C语言里,变量存放在内存中,而内存其实就是一组有序字节组成的数组,每个字节有唯一的内存地址.CPU 通过内存寻址对存储在内存中的某个指定数据对象的地址进行定位.这里,数据对象是指存储在 ...

  10. 【C/C++开发】C++静态库与动态库以及在Linux和Windows上的创建使用

    原文出处: 吴秦的博客    这次分享的宗旨是--让大家学会创建与使用静态库.动态库,知道静态库与动态库的区别,知道使用的时候如何选择.这里不深入介绍静态库.动态库的底层格式,内存布局等,有兴趣的同学 ...