按钮点击效果(水波纹)
原文地址：http://www.cnblogs.com/ys-ys/p/5874343.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>按钮水波纹</title>
<style type="text/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;
}
</style>
<script type="text/javascript">
window.onload = function() {
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();
}
</script>
</head>
<body>
<a class="btn color-1 material-design" data-color="#2f5398">Press me!</a>
</body>
</html>
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JS</title> <link rel="stylesheet" type="text/css" href="css/reset.css" /> <script type="text/javascript" src="js/jquery-3.2.0.js"></script> <style type="text/css" media="screen"> ul { font-size: 0; position: relative; padding: 0; width: 480px; margin: 40px auto; user-select: none; } li { display: inline-block; width: 160px; height: 60px; background: #E95546; font-size: 16px; text-align: center; line-height: 60px; color: white; text-transform: uppercase; position: relative; overflow: hidden; cursor: pointer; } .slider { display: block; position: absolute; bottom: 0; left: 0; height: 4px; background: #1685D3; transition: all 0.5s; } .ripple { width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.4); -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); position: absolute; opacity: 1; } .rippleEffect { -webkit-animation: rippleDrop .4s linear; animation: rippleDrop .4s linear; } @-webkit-keyframes rippleDrop { 100% { -webkit-transform: scale(2); transform: scale(2); opacity: 0; } } @keyframes rippleDrop { 100% { -webkit-transform: scale(2); transform: scale(2); opacity: 0; } } </style> </head> <body> <ul> <li>项目一</li> <li>项目二</li> <li>项目三</li> <li class="slider"></li> </ul> </body> <script> $("ul li").click(function(e) { if($(this).hasClass('slider')) { return; } var whatTab = $(this).index(); var howFar = 160 * whatTab; $(".slider").css({ left: howFar + "px" }); $(".ripple").remove(); var posX = $(this).offset().left, posY = $(this).offset().top, buttonWidth = $(this).width(), buttonHeight = $(this).height(); console.log(posX, posY, buttonWidth, buttonHeight) $(this).append("<span class='ripple'></span>"); if(buttonWidth >= buttonHeight) { buttonHeight = buttonWidth; } else { buttonWidth = buttonHeight; } var x = e.pageX - posX - buttonWidth / 2; var y = e.pageY - posY - buttonHeight / 2; $(".ripple").css({ width: buttonWidth, height: buttonHeight, top: y + 'px', left: x + 'px' }).addClass("rippleEffect"); }); </script> </html>
