整理文档，搜索出一个原生js的代码实现简单的Ripple按钮，稍微整理精简一下分享。

效果如图所示

准备配料(html部分)

Ul id=' nav '阿利href=' # ' spanmy主页/Span Span class=' circle '/Span/a/Li阿利href=' # ' Span my/Span Span class=' circle '/Span/a/Li阿利href=' # ' Span more/Span class=' circle '/Span/a/Li/ul菜单Li的典型布局，其中span.circle表示通过触摸弹出的小圆圈。

准备辅助材料(css部分)

# nav { display: flex} # nav li { position: relative飞越：隐藏；flex : 1；}阿利{ display: flexflex-direction:柱；justice-content : center；align-items:居中；} .圆圈{ position:绝对值；背景技术： rgba(86，187，247， 1)；宽度： 1px；height: 1pxtop :50%；左侧：50%；边界半径：50%；} . circle . act { animation : nav circle . 4s；} @关键帧NavCircle { from { transform : scale(0)}；边界半径：50%；}到{ transform : scale(200)；边界半径：50%；}}我的想法是这样的：相对定位li，绝对定位小圆，在小圆上添加动画navCircle，用css3让它变大。至于为什么是200倍和. 4s，测试后更人性化，其他倍数可以试试。

用火烹饪(js部分)

var Li=document . getelementbyid(' nav ')。query selectorall(' Li ')；var circle=document . getelementbyid(' nav ')。querySelectorAll('。圆圈')；for(var i=0，len=li.length伊琳；i ){ ((i)={ li[i]。addEventListener('click '，(e)={ circle[i]。setAttribute('class '，' circle act ')；圈出[我]。setAttribute('style '，' top: ' e.layerY ' pxleft : ' e . layerx ' px ')；});李[我]。addEventListener('touchend '，()={ circle[i])。setAttribute('class '，' circle ')；} }) })(i)}代码很简单，相信大家都猜到了。当你点击li时，给小圆圈添加类“act”，并设置小圆圈的起始位置。当监控触摸结束时，取消课程“act”。有些人一定会问，为什么不用touchstart？唉，因为没有layerY属性，你很久没找到了。还有为什么不用forEach，有些浏览器不支持，眼泪==！

友好提醒！Touchend仅支持移动终端

目标

我做这部分是因为我们在安卓app里有这个功能，所以我就想看看h5是怎么做的。最初的想法是让宽度和高度随时间增加，但实现后感觉性能不好，于是想到直接增加倍数，于是这个功能就完美诞生了。我开始享受这个套餐了！