使用原生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('nav').querySelectorAll('li');
 var circle = document.getElementById('nav').querySelectorAll('.circle');
   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中文網其他相關文章！