获得点击按钮的正确位置（涟漪效应）
Posted
技术标签:
【中文标题】获得点击按钮的正确位置（涟漪效应）【英文标题】：Getting right position of clicked button (ripple effect) 【发布时间】：2016-08-21 15:18:08 【问题描述】：我无法找到正确的点击位置。我想做谷歌材料设计——点击按钮的涟漪效应。圆圈需要在按钮上而不是其他地方。因此，当您单击按钮时，白色圆圈会显示在所需按钮上方的其他位置。我哪里错了？
$(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>【问题讨论】：
【参考方案1】：您的 javascript 没有问题，您只需将按钮的 position 设置为 relative，以便将 .btn-over span 的定位包含在其中。您还应该考虑将按钮的overflow 设置为hidden，这样“涟漪”就不会溢出。
$(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>");
x=e.pageX-posX-bWidth/2;
y=e.pageY-posY-bHeight/2;
$(".btn-over").css(
width:d+"px",
height:d+"px",
top:y+"px",
left:x+"px"
).addClass("animation");
);
);nav
background-color:#424242;
color:#fff;
height:3rem;
.menu
float:right;
list-style:none;
.menu li
display:inline-block;
.btn-sigup
background-color:#4CAF50;
overflow:hidden;
position:relative;
.btn-sigup:hover
background-color:#66BB6A;
.btn-login
background-color:transparent;
overflow:hidden;
position:relative;
.btn-over
background:rgba(255, 255, 255, 0.3);
border-radius:50%;
display:inline-block;
position:absolute;
transform:scale(0);
.animation
animation:ripple .65s linear;
@keyframes ripple
to
opacity:0;
transform:scale(2.5);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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>这里有一个替代实现，带有一些额外的功能，您可以在任何您希望的元素上使用它。要实现它，您需要从 CSS 中复制 JavaSript 和重要的东西，然后您只需将要应用此效果的任何元素提供给 data-ripple-color 属性，该属性的值可以是任何有效的 CSS color。
要在每次单击元素时将此效果应用于元素，而无需等待上一个动画完成，请为其添加 data-ripple-multiple 属性，其值为 true。有关示例，请参见下面的按钮元素。
(function()
if(document.querySelector("[data-ripple-color]"))
var span=document.createElement("span");
span.classList.add("ripple");
document.addEventListener("click",function(event)
var target=event.target,color,data,multi,node,style;
while(!target.dataset.rippleColor&&target!==document.body)
target=target.parentNode;
data=target.dataset;
multi=data.rippleMultiple;
if((color=data.rippleColor)&&(multi||!data.rippleWait))
if(!multi)data.rippleWait="true";
target.appendChild(node=span.cloneNode(0));
style=node.style;
style.background=color;
style.height=style.width=Math.min(target.offsetHeight,target.offsetWidth)+"px";
style.left=event.pageX-target.offsetLeft+"px";
style.top=event.pageY-target.offsetTop+"px";
setTimeout(function()
target.removeChild(node);
if(!multi)delete data.rippleWait;
,750);
,0);
)();/* Housekeeping */@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900);*,*::before,*::after-moz-appearance:none;-webkit-appearance:none;appearance:none;background:none;background-clip:padding-box;border:0;border-radius:0;box-sizing:border-box;color:rgba(0,0,0,.87);font-family:Roboto,arial,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased;font-style:normal;font-weight:500;line-height:1.2em;list-style:none;margin:0;outline:0;padding:0;-webkit-tap-highlight-color:rgba(0,0,0,0);text-align:left;text-decoration:none;text-indent:0;text-rendering:auto;transition-duration:.2s;transition-property:none;transition-timing-function:cubic-bezier(.4,0,.2,1);*>*font-size:inherit;font-style:inherit;font-weight:inherit;*>*,*::before,*::aftercolor:inherit;font-family:inherit;line-height:inherit;
/* The important stuff */
[data-ripple-color]
overflow:hidden;
position:relative;
.ripple
animation:ripple 1s cubic-bezier(.4,0,.2,1);
border-radius:50%;
display:block;
opacity:0;
position:absolute;
@keyframes ripple
from
transform:translate(-50%,-50%) scale(1);
opacity:.54;
to
transform:translate(-50%,-50%) scale(54);
opacity:0;
/* Fiddle styles */
a[data-ripple-color],button[data-ripple-color]
border-radius:3px;
cursor:pointer;
display:block;
font-size:24px;
font-weight:500;
line-height:40px;
margin:0 auto 8px;
padding:8px;
text-align:center;
width:200px;
a[data-ripple-color]
background:#F44336;
color:#fff;
button[data-ripple-color]
background:#3f51b5;
color:#fff;
font-size:24px;
line-height:40px;
padding:8px;
text-align:center;
text-transform:uppercase;
width:200px;
figure[data-ripple-color]
border-radius:3px;
margin:0 auto 8px;
width:200px;
p[data-ripple-color]
line-height:20px;
margin:0 8px 8px;
padding:8px;
<button data-ripple-color="#fff" data-ripple-multiple="true">Button</button>
<a data-ripple-color="#303f9f">Link</a>
<figure data-ripple-color="rgb(0,0,0)"><img src="http://placehold.it/200x200.png/e0e0e0?text=Image+%0A+Parent"></figure>
<p data-ripple-color="#616161">Paragrpah</p>【讨论】：
OMG....我真的忘记了 css 可能是我专注于 js 文件的问题。谢谢。 轻松搞定；新鲜的眼睛有时会产生奇迹 :) 我已经用替代实现更新了我的答案，这可能对你有用。 再次感谢您。第二种解决方案更复杂，也不用于材料设计。但是对于您想要产生连锁反应的一切都是很好的解决方案。我会考虑在我的项目中实施。我认为这对于所有正在寻找谷歌材料设计涟漪效应的人来说都是一个很好的解决方案。 P.S - 使用 jQuery 更容易构建它吗？ 使用普通的普通 JavaScript 总是更好。当你说“[it's] not used in Material Design”时，你是什么意思？如果涟漪不适合您的需求，您可以通过编辑其 CSS 来调整它们。 如果您的意思是 Material Design 不会在您每次单击元素时应用涟漪 - 相反，它会等到前一个涟漪完成 - 我已经更新了替代实现以反映这一点。而且，如果您需要/喜欢，您仍然可以使用新的data- 属性将涟漪效果应用于元素每次单击它。以上是关于获得点击按钮的正确位置（涟漪效应）的主要内容，如果未能解决你的问题，请参考以下文章
Xamarin.Forms 不可点击的 ListView（移除选择涟漪效应）