web前端|js教程
点击按钮,水波纹,js,点击按钮水波纹
web前端-js教程
本文给大家分享基于js和canves实现点击按钮水波纹效果，效果非常逼真，对此感兴趣的朋友一起看看吧
车牌识别 源码,vscode 新手教程,ubuntu 迎宾机器人,tomcat版本几好,sqlite 导出表数据,三色球 插件,前端框架工作流程,合肥python爬虫学习,php带参数,杭州SEO博客天下,html商城网站源码下载,网页计时器代码,学生信息html模板,页面滚动条 代码,人力资源管理系统 ee,房地产小程序模板源码lzw
近来看到个不错的按钮点击效果，当点击时产生一次水波涟漪效果，挺好玩的，于是简单的实现了下(没考虑低版本浏览器兼容问题)
云免流app源码,魅蓝2 ubuntu,tomcat无法访问页面,jsp网络爬虫,php开源开发工具,白酒seolzw
先看看效果吧，如下图（录制gif软件有点渣，看起来卡卡的…）
串口通信编程实践源码,vscode连不上ssh,ubuntu haoya,sftp启动tomcat,sqlite支持多线程,discuz插件安装地址,物业管理系统前端框架,java 爬虫 动态图片,php内容采集,SEO营销方案饰品,易语言qq一键登录网站,如何打开网页根目录,discuz 社区类模板lzw
这种效果可以由元素内嵌套canves实现，也可以由css3实现。
Canves实现
网上摘了一份canves实现的代码，略微去掉了些重复定义的样式并且给出js注释，代码如下
html代码
Press me!
css代码
* {box-sizing: border-box;outline: none;}body {font-family: Open Sans;font-size: 100%;font-weight: 300;line-height: 1.5em;text-align: center;}.btn {border: none;display: inline-block;color: white;overflow: hidden;margin: 1rem;padding: 0;width: 150px;height: 40px;text-align: center;line-height: 40px;border-radius: 5px;}.btn.color-1 {background-color: #426fc5;}.btn-border.color-1 {background-color: transparent;border: 2px solid #426fc5;color: #426fc5;}.material-design {position: relative;}.material-design canvas {opacity: 0.25;position: absolute;top: 0;left: 0;}.container {align-content: center;align-items: flex-start;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: center;margin: 0 auto;max-width: 46rem;}
js代码
var canvas = {},centerX = 0,centerY = 0,color = \,containers = document.getElementsByClassName(material-design)context = {},element = {},radius = 0,// 根据callback生成requestAnimationFrame动画requestAnimFrame = function () {return (window.requestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {window.setTimeout(callback, 1000 / 60);});} (),// 为每个指定元素生成canvesinit = function () {containers = Array.prototype.slice.call(containers);for (var i = 0; i < containers.length; i += 1) {canvas = document.createElement(canvas);canvas.addEventListener(click, press, false);containers[i].appendChild(canvas);canvas.style.width =100%;canvas.style.height=100%;canvas.width = canvas.offsetWidth;canvas.height = canvas.offsetHeight;}},// 点击并且获取需要的数据，如点击坐标、元素大小、颜色press = function (event) {color = event.toElement.parentElement.dataset.color;element = event.toElement;context = element.getContext(2d);radius = 0;centerX = event.offsetX;centerY = event.offsetY;context.clearRect(0, 0, element.width, element.height);draw();},// 绘制圆形，并且执行动画draw = function () {context.beginPath();context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);context.fillStyle = color;context.fill();radius += 2;// 通过判断半径小于元素宽度，不断绘制 radius += 2 的圆形if (radius < element.width) {requestAnimFrame(draw);}};init();
CSS3实现
接下来就是纯手打的代码了…觉得还是css3实现的方便些，可能是css写习惯了…
html代码
Press me!
css代码
.waves{position:relative;cursor:pointer;display:inline-block;overflow:hidden;text-align: center;-webkit-tap-highlight-color:transparent;z-index:1;}.waves .waves-animation{position:absolute;border-radius:50%;width:25px;height:25px;opacity:0;background:rgba(255,255,255,0.3);transition:all 0.7s ease-out;transition-property:transform, opacity, -webkit-transform;-webkit-transform:scale(0);transform:scale(0);pointer-events:none}.ts-btn{width: 200px;height: 56px;line-height: 56px;background: #f57035;color: #fff;border-radius: 5px;}
js代码
document.addEventListener(DOMContentLoaded,function(){var duration = 750;// 样式string拼凑var forStyle = function(position){var cssStr = \;for( var key in position){if(position.hasOwnProperty(key)) cssStr += key+:+position[key]+;;};return cssStr;}// 获取鼠标点击位置var forRect = function(target){var position = {top:0,left:0}, ele = document.documentElement;undefined != typeof target.getBoundingClientRect && (position = target.getBoundingClientRect());return {top: position.top + window.pageYOffset - ele.clientTop,left: position.left + window.pageXOffset - ele.clientLeft}}var show = function(event){var pp = event.target,cp = document.createElement(p);pp.appendChild(cp);var rectObj = forRect(pp),_height = event.pageY - rectObj.top,_left = event.pageX - rectObj.left,_scale = scale( + pp.clientWidth / 100 * 10 + );var position = {top: _height+px,left: _left+px};cp.className = cp.className + " waves-animation",cp.setAttribute("style", forStyle(position)),position["-webkit-transform"] = _scale,position["-moz-transform"] = _scale,position["-ms-transform"] = _scale,position["-o-transform"] = _scale,position.transform = _scale,position.opacity = "1",position["-webkit-transition-duration"] = duration + "ms",position["-moz-transition-duration"] = duration + "ms",position["-o-transition-duration"] = duration + "ms",position["transition-duration"] = duration + "ms",position["-webkit-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",position["-moz-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",position["-o-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",position["transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)",cp.setAttribute("style", forStyle(position));var finishStyle = {opacity: 0,"-webkit-transition-duration": duration + "ms", // 过渡时间"-moz-transition-duration": duration + "ms","-o-transition-duration": duration + "ms","transition-duration": duration + "ms","-webkit-transform" : _scale,"-moz-transform" : _scale,"-ms-transform" : _scale,"-o-transform" : _scale,top: _height + "px",left: _left + "px",};setTimeout(function(){cp.setAttribute("style", forStyle(finishStyle));setTimeout(function(){pp.removeChild(cp);},duration);},100)}document.querySelector(.waves).addEventListener(click,function(e){show(e);},!1);},!1);
好了，就这些， 顺便，中秋快乐~
