我在寻找正确的点击位置上遇到了问题。我想在点击按钮时实现谷歌材料设计中的涟漪效果。圆圈需要在按钮上而不是其他地方。因此,当您单击按钮时,白色圆圈会显示在其他位置而不是所需的按钮上方。我犯了什么错误?
$(function () {
var btnClick, bWidth, bHeight, x, y, posX, posY,d;
$(".btn").click(function (e) {
e.preventDefault();
posX = $(this).offset().left;
posY = $(this).offset().top;
bWidth = $(this).outerWidth();
bHeight = $(this).outerHeight();
d = Math.max(bWidth, bHeight);
$(".btn-over").remove();
if ($(this).find(".btn-over").length === 0) {
$(this).prepend("<span class='btn-over'></span>");
}
// btnClick = $(this).children(".btn-over");
// btnClick.removeClass("animation");
// if (!btnClick.height() && !btnClick.width()) {
// d = Math.max($(this).outerWidth(), $(this).outerHeight());
// btnClick.css({
// height: d,
// width: d
// });
// }
x = e.pageX - posX - bWidth / 2;
y = e.pageY - posY - bHeight /2;
$(".btn-over").css({
width: d,
height: d,
top: y + 'px',
left: x + 'px'
}).addClass("animation");
});
});
nav {
height: 3rem;
background-color: #424242;
color: #fff; }
.menu {
list-style: none;
float: right; }
.menu li {
display: inline-block; }
.btn-sigup {
box-shadow: none;
background-color: #4CAF50; }
.btn-sigup:hover {
background-color: #66BB6A;
box-shadow: none; }
.btn-login {
box-shadow: none;
background-color: transparent; }
.btn-login:hover {
box-shadow: none;
background-color: transparent; }
.btn-over {
display: inline-block;
position: absolute;
background: rgba(255, 255, 255, 0.3);
border-radius: 100%;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
transform: scale(0); }
.animation {
-webkit-animation: ripple 0.65s linear;
-moz-animation: ripple 0.65s linear;
-ms-animation: ripple 0.65s linear;
-o-animation: ripple 0.65s linear;
animation: ripple 0.65s linear; }
@-webkit-keyframes ripple {
100% {
opacity: 0;
-webkit-transform: scale(2.5); } }
@-moz-keyframes ripple {
100% {
opacity: 0;
-moz-transform: scale(2.5); } }
@-o-keyframes ripple {
100% {
opacity: 0;
-o-transform: scale(2.5); } }
@keyframes ripple {
100% {
opacity: 0;
transform: scale(2.5); } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<header>
<nav>
<ul class="menu">
<li>
<button class="btn btn-login">LOG IN</button>
</li>
<li>
<button class="btn btn-sigup">SING UP</button>
</li>
</ul>
</nav>
</header>
data-
属性使其在每次单击元素时应用涟漪效果。 - Shaggy