js点击按钮button效果（波效果）
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效果（波效果）的更多相关文章
- Bootstrap的js插件之按钮(button)
1)属性: data-loading-text="载入中..."--使button呈现载入状态: data-toggle="button"--使按钮可以切换状态 ...
- JS点击按钮打开新的独立页面
工作中遇到需要点击按钮弹出一个独立的页面,并显示指定内容的问题,查了一些资料后,得到以下方法: window.open('locationPage.html', '_blank', 'height=1 ...
- html js点击按钮滚动跳转定位到页面指定位置（DIV）的方法代码
一:通过html锚点实现滚动定位到页面指定位置(DIV): 如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的d ...
- JS点击按钮弹出窗口
由于没有系统学习过JS,遇到一个需求:点击按钮,弹出一个独立的窗口. 在网上百度了一下,并没有找到满意的结果,最重要的是各种方法很复杂.最终,仔细研究了一下,原来只是需要只要一个简单的函数就能满足自己 ...
- js点击按钮为元素随机字体颜色和背景色
文章地址 https://www.cnblogs.com/sandraryan/ 写两个button和一个div,点击按钮分别改变背景色和前景色(字体颜色).产生的是一个随机颜色. <!DOCT ...
- js点击按钮触发事件的方法
<!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <input id= ...
- winfrom 点击按钮button弹框显示颜色集
1.窗体托一个按钮button: 2.单击事件: private void btnForeColor_Click(object sender, EventArgs e) { using (ColorD ...
- jquery 实现点击按钮后出现倒计时效果（用于实现发送手机验证码、邮箱验证码）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js点击更多显示更多内容效果
我写了一个简单的分段显示插件,用法很简单:1,把你要分面显示的内容的容器元素增加一个class=showMoreNChildren,并增加一个自定义属性pagesize="8" 这 ...
随机推荐
- 201871010107-公海瑜《面向对象程序设计（java）》第十三周学习总结
201871010107-公海瑜<面向对象程序设计(java)>第十三周学习总结 项目 内容 这个作业属于哪个课程 ...
- 201871010125 王玉江 《面向对象程序设计（Java）》第八周实验总结
项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...
- ABP 下载源码报错
ASP.NET Boilerplate 下载地址应该是这个:https://github.com/aspnetboilerplate/aspnetboilerplate/tree/v1.5.2 下载的 ...
- C++对象布局
<C++应用程序性能优化><深度探索C++对象模型>笔记 #include<iostream> using namespace std; class student ...
- zr2019暑期高端峰会AB组十测
郑睿round 1 代码真的好写,还是太笨了,爆零了. 郑睿round_2 好失败,A题真的是日狗了,第一发就可以A的,忘记费用流的反向边也要加一发流量了.哎,我注定是要爆零. 正睿round_3 日 ...
- 黑客最喜欢的15个Nmap扫描命令，熟练掌握你也能成为黑客大神
1.针对IP或主机的基本Nmap扫描 nmap IP 现在,如果要扫描主机名,只需替换主机的IP,如下所示: nmap 域名 2.扫描本地或远程服务器上的特定端口或扫描整个端口范围 nmap -p 1 ...
- Java之数据库基础理论
一.事务的四大特性 ACID 只有满足一致性,事务的执行结果才是正确的. 在无并发的情况下,事务串行执行,隔离性一定能够满足.此时要只要能满足原子性,就一定能满足一致性. 在并发的情况下,多个事务并发 ...
- SQL语句中使用回车换行符
今天发现sql数据库有个图片路径中包含空格,结果在替换和查找时,发现用空格无效,后来经过确认才发现原来是回车换行符引起,从表面看很像空格,实际是回车符,要用char(13)才能进行替换和查找 --查找 ...
- 【Struts】Struts框架配置详解
1.首先将所必须的Jar包放到项目的WebRoot/WEB-INF/lib目录下. 如果你没有这些Jar文件,你可以到Struts官网上下载:http://struts.apache.org/.因为经 ...
- Spring Cloud Feign高级应用
1.使用feign进行服务间的调用 spring boot2X整合nacos一使用Feign实现服务调用 2.开启gzip压缩 Feign支持对请求与响应的压缩,以提高通信效率,需要在服务消费者配置文 ...