使用原生js实现Ripple按钮的简单实例代码
本篇文章主要介绍了原生js实现简单的Ripple按钮实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
整理文档,搜刮出一个原生js实现简单的Ripple按钮的代码,稍微整理精简一下做下分享。
效果如图
准备食材(html部分)
<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>
典型的菜单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<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) }
代码很简单,相信大家也猜到了,点击li的时候给小圆圈添加class 'act'
,并且设置小圆圈的起始位置,监听触摸结束的时候,取消class 'act'
,有人肯定要问了,为什么你不用touchstart
呢,唉,因为没有layerY
这个属性,找了半天都没找到啊。还有为什么不用<a href="http://www.php.cn/wiki/127.html" target="_blank">forEach</a>
,有的浏览器不支持啊,泪奔= = !
友情提示!touchend
仅支持移动端
结束
做这个部分是因为我们安卓app里面有这个功能,所以我就想看看h5怎么做,开始的思路是让宽度和高度随着时间变大,但是实现了之后感觉性能不好,所以才想到了直接增加倍数呗,于是这个功能变完美诞生了,开始享用这份套餐把 !
以上是使用原生js实现Ripple按钮的简单实例代码的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

一段人工智能生成的虚假视频在加密货币交易者中流传,其中 Ripple 的联合创始人虚假承诺向现有 XRP 硬币持有者奖励高达 1.5 亿 XRP 加密货币。

新的合资企业可能会涉及 XRP,并有可能将山寨币推向 1 美元。

Ripple 首席执行官布拉德·加林豪斯 (Brad Garlinghouse) 表示,公司已准备好接受目前正在进行的法律程序。

首席执行官布拉德·加林豪斯(Brad Garlinghouse)讨论了唐纳德·特朗普(Donald Trump)对加密货币的支持,特朗普在竞选期间将自己定位为“加密货币倡导者”。

Stuart Alderoty 分享了 Ripple 与美国证券交易委员会 (SEC) 之间正在进行的诉讼中将采取的后续步骤的进展。

瑞波币(XRP)前景展望:山寨币季节能否突破4美元?本文将探讨瑞波币(XRP)在即将到来的山寨币季节中,能否突破4美元的历史高点。尽管整体加密货币市场低迷,但XRP仍存在上涨潜力。XRP能否突破4美元?分析师预测XRP将在未来几个月反弹,甚至在4月15日达到4.12美元的历史新高,涨幅近80%。然而,平均预测价格约为3.12美元,4月15日可能只是短暂峰值。XRP与韩国的合作以及XRPETF的审批进程,将是影响其价格的关键因素。韩国合作将提升XRP在韩国的市场份额;而XRPETF的批准,将

第二巡回上诉法院已下达命令,要求 @SECGov 的摘要必须在 2025 年 1 月 15 日或之前提交。

由于与 SEC 持续的法律斗争,Ripple XRP 在 2024 年遭遇了几次挫折。尽管进行了多次生态系统升级并且投资者采用率不断提高,但瑞波币 XRP 仍无法上涨。
