标签：jquery javascript css material-design 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>");
        }

//        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>

解决方法:

您的JavaScript没有任何问题,您只需将按钮的位置设置为相对位置,以便.btn-over span的定位包含在其中.您还应该考虑将按钮溢出设置为隐藏,以便“波纹”不会溢出.

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

要在每次单击元素时将此效果应用于元素而不等待上一个动画完成,请为其添加值为true的data-ripple-multiple属性.有关示例,请参阅下面的按钮元素.

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

标签：jquery,javascript,css,material-design,ripple
来源： https://codeday.me/bug/20190611/1219882.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。