这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了点击按钮实现水波纹效果, 具有一定的参考价值,感兴趣的小伙伴们可以参考一下
近来看到个不错的按钮点击效果,当点击时产生一次水波涟漪效果,挺好玩的,于是简单的实现了下 (没考虑低版本浏览器兼容问题)
先看看效果吧,如下图(录制 gif 软件有点渣,看起来卡卡的...)
这种效果可以由元素内嵌套 canves 实现,也可以由 CSS3 实现。
Canves 实现
网上摘了一份 canves 实现的代码,略微去掉了些重复定义的样式并且给出 js 注释,代码如下
html 代码:<a class="btn color-1 material-design"data-color="#2f5398">Press me!</a>
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);
- });
- } (),
- // 为每个指定元素生成canves
- init = 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 pDiv = event.target,
- cDiv = document.createElement('div');
- pDiv.appendChild(cDiv);
- var rectObj = forRect(pDiv),
- _height = event.pageY - rectObj.top,
- _left = event.pageX - rectObj.left,
- _scale = 'scale(' + pDiv.clientWidth / 100 * 10 + ')';
- var position = {
- top: _height + 'px',
- left: _left + 'px'
- };
- cDiv.className = cDiv.className + " waves-animation",
- cDiv.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)",
- cDiv.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() {
- cDiv.setAttribute("style", forStyle(finishStyle));
- setTimeout(function() {
- pDiv.removeChild(cDiv);
- },
- duration);
- },
- 100)
- }
- document.querySelector('.waves').addEventListener('click',
- function(e) {
- show(e);
- },
- !1);
- },
- !1);
就这些,原理也简单,获取点击位置 > 添加样式 顺便,中秋快乐~
来源: http://www.phperz.com/article/17/0723/331851.html