原生js如何实现简单的Ripple按钮-创新互联
这篇文章主要介绍原生js如何实现简单的Ripple按钮,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
嘉峪关网站建设公司创新互联,嘉峪关网站设计制作,有大型网站制作公司丰富经验。已为嘉峪关上1000家提供企业网站建设服务。企业网站搭建\外贸营销网站建设要多少钱,请找那个售后服务好的嘉峪关做网站的公司定做!整理文档,搜刮出一个原生js实现简单的Ripple按钮的代码,稍微整理精简一下做下分享。
效果如图
准备食材(html部分)
典型的菜单li布局,里面的span.circle
表示的是触摸弹出的小圆圈。
准备辅料 (css部分)
#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%;} }
我的思路是这样的,给li相对定位,给小圆圈绝对定位,再给小圆圈添加动画navCircle
,采用css3的缩放使其变大,至于为什么是200倍和.4s呢,经过测试这样更人性化,其余的倍数你们也可以试试。
大火烹饪 (js部分)
var li = document.getElementById('nav').querySelectorAll('li'); var circle = document.getElementById('nav').querySelectorAll('.circle'); for(var i=0,len = li.length;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) }
以上是“原生js如何实现简单的Ripple按钮”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联网站建设公司行业资讯频道!
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
分享名称:原生js如何实现简单的Ripple按钮-创新互联
网页网址:http://ybzwz.com/article/dsidgp.html