首页 web前端 js教程 使用原生js实现Ripple按钮的简单实例代码

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

Mar 25, 2017 pm 02:52 PM

本篇文章主要介绍了原生js实现简单的Ripple按钮实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。

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

效果如图

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

准备食材(html部分)

 <ul id="nav">
  <li>
   <a href=&#39;#&#39;>
    <span>首页</span>
   <span class="circle"></span>
   </a>
  </li>
  <li>
   <a href=&#39;#&#39;>
    <span>我的</span>
   <span class="circle"></span>
   </a>
  </li>
  <li>
   <a href=&#39;#&#39;>
    <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(&#39;nav&#39;).querySelectorAll(&#39;li&#39;);
 var circle = document.getElementById(&#39;nav&#39;).querySelectorAll(&#39;.circle&#39;);
   for(var i=0,len = li.length;i<len;i++){
    ((i)=>{
    li[i].addEventListener(&#39;click&#39;,(e)=>{
     circle[i].setAttribute(&#39;class&#39;,&#39;circle act&#39;);
     circle[i].setAttribute(&#39;style&#39;,&#39;top:&#39;+e.layerY+&#39;px;left:&#39;+e.layerX+&#39;px&#39;);
    });

    li[i].addEventListener(&#39;touchend&#39;,()=>{
     circle[i].setAttribute(&#39;class&#39;,&#39;circle&#39;);
    })
    })(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中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

人工智能生成的虚假视频承诺奖励 XRP 硬币持有者,但这是一个骗局 人工智能生成的虚假视频承诺奖励 XRP 硬币持有者,但这是一个骗局 Oct 22, 2024 am 03:08 AM

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

前 PayPal 数字货币首席财务官 Neil DeSilva 与 Ripple 探索合作创建可持续区块链业务 前 PayPal 数字货币首席财务官 Neil DeSilva 与 Ripple 探索合作创建可持续区块链业务 Oct 18, 2024 am 12:50 AM

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

Ripple Labs 在与 SEC 持续的法律斗争中提出交叉上诉 Ripple Labs 在与 SEC 持续的法律斗争中提出交叉上诉 Oct 12, 2024 pm 09:44 PM

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

Ripple 首席执行官 Brad Garlinghouse 讨论唐纳德·特朗普对加密货币的支持,批评 SEC 的加密监管方法 Ripple 首席执行官 Brad Garlinghouse 讨论唐纳德·特朗普对加密货币的支持,批评 SEC 的加密监管方法 Nov 09, 2024 pm 06:28 PM

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

Ripple CLO 详细分析美国 SEC 与 XRP 的后续行动 Ripple CLO 详细分析美国 SEC 与 XRP 的后续行动 Oct 16, 2024 am 09:04 AM

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

Ripple(XRP):本季度XRP币价格能否突破4美元大关? Ripple(XRP):本季度XRP币价格能否突破4美元大关? Mar 04, 2025 am 06:15 AM

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

Ripple 诉 SEC 案件正在等待第二巡回上诉法院的听证会和裁决 Ripple 诉 SEC 案件正在等待第二巡回上诉法院的听证会和裁决 Nov 01, 2024 pm 03:54 PM

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

Ripple(XRP)能否从法律审查中恢复过来? Ripple(XRP)能否从法律审查中恢复过来? Nov 10, 2024 pm 09:20 PM

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

See all articles