获取点击按钮的正确位置（涟漪效果）

Question

获取点击按钮的正确位置（涟漪效果）

javascriptjquerycssmaterial-designripple

4

我在寻找正确的点击位置上遇到了问题。我想在点击按钮时实现谷歌材料设计中的涟漪效果。圆圈需要在按钮上而不是其他地方。因此，当您单击按钮时，白色圆圈会显示在其他位置而不是所需的按钮上方。我犯了什么错误？

$(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>

- hongchen

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shaggy · Accepted Answer

没有问题，你的 JavaScript 没有问题，你只需要将按钮的 position 设置为 relative，这样 .btn-over 的定位 span 就会包含在它们内部。你还应该考虑将按钮的 overflow 设置为 hidden，这样 "ripple" 就不会溢出它们。

$(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>

这里有一个备选实现，带有一些额外的功能，您可以将其用于任何想要的元素。要实现它，您需要复制JavaSript以及CSS中的重要内容，然后只需为要应用此效果的任何元素添加一个data-ripple-color属性，该属性的值为任何有效的CSS颜色。

要使元素在每次点击时立即应用此效果，而无需等待上一个动画完成，请为其添加一个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,*::after{color: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>