Nativejs实现简单Ripple按钮效果如图准备食材(html部分)首页我的更多典型的菜单li布局，里面的span.circle代表触摸时弹出的小圆圈。准备配件（css部分）#nav{display:flex;}#navli{位置：相对；溢出：隐藏；弹性：1；}lia{显示：flex;弹性方向：列；证明内容：居中；对齐项目：居中；}.circle{位置：绝对；背景：rgba(86,187,247,.1);宽度：1px；高度：1px；顶部：50%；左：50%；边界半径：50%；.circle.act{动画：navCircle.4s;}@keyframesnavCircle{from{transform:scale(0);border-radius:50%;}to{transform:scale(200);border-radius:50%;}}我的思路是这样的，li的相对定位，对小圆进行绝对定位，然后给小圆加上动画navCircle，用css3缩放让它变大，至于为什么是200倍.4s，经过测试，比较人性化，也可以试试其他的倍数。大火煮饭（js部分）varli=document.getElementById('nav').querySelectorAll('li');varcircle=document.getElementById('nav').querySelectorAll('.circle');for(vari=0,len=li.length;i{li[i].addEventListener('click',(e)=>{circle[i].setAttribute('class','circleact');circle[i].setAttribute('style','top:'+e.layerY+'px;left:'+e.layerX+'px');});li[i].addEventListener('touchend',()=>{circle[i].setAttribute('class','circle');})})(i)}代码很简单，相信你已经猜到了，点击li的时候，给小圆圈添加类'act'，并设置小圆圈的起始位置。当监听触摸结束时，取消类'act'。有人肯定要问了，为什么不用touchstart？唉，因为没有layerY属性，找了半天也没找到啊。温馨的提示！touchend只支持移动端。这部分是因为我们的Androidapp有这个功能，所以想看看h5是怎么做的。最初的想法是让宽高随时间变大，但是实现之后感觉性能不好。好吧，所以才想到直接增加倍数，于是这个功能就完美诞生了，开始享受这个套餐吧！
