原生js实现简单的Ripple按钮实例代码

 <ul id="nav">  <li>   <a href='#'>    <span>首页</span>   <span class="circle"></span>   </a>  </li>  <li>   <a href='#'>    <span>我的</span>   <span class="circle"></span>   </a>  </li>  <li>   <a href='#'>    <span>更多</span>   <span class="circle"></span>   </a>  </li> </ul>

 #nav { display: flex; } #nav li { position: relative; overflow: hidden; flex: 1; } li a {  display: flex; flex-direction: column; justify-content: center; align-items: center; } .circle{ position: absolute; background: rgba(86,187,247,.1); width: 1px; height: 1px; top:50%; left: 50%; border-radius: 50%; } .circle.act{  animation: navCircle .4s; } @keyframes navCircle { from {transform: scale(0);border-radius: 50%;} to {transform:scale(200);border-radius: 50%;} }

 var li = document.getElementById('nav').querySelectorAll('li'); var circle = document.getElementById('nav').querySelectorAll('.circle');   for(var i=0,len = li.length;i<len;i++){    ((i)=>{    li[i].addEventListener('click',(e)=>{     circle[i].setAttribute('class','circle act');     circle[i].setAttribute('style','top:'+e.layerY+'px;left:'+e.layerX+'px');    });    li[i].addEventListener('touchend',()=>{     circle[i].setAttribute('class','circle');    })    })(i)   }