ネイティブjsを使用してリップルボタンを実装する簡単なサンプルコード

この記事では、簡単なリップルボタンのネイティブjs実装サンプルコードを中心に紹介しますので、興味のある方は参考にしてみてください。

ドキュメントを整理し、シンプルなリップル ボタンを実装するためのネイティブ JS コードを検索し、整理して、共有のために少し合理化します。

効果は写真の通りです

材料の準備(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>

典型的なメニューのレイアウト、内側のspan.circleは、次のときにポップアップする小さな円を表します。触れた。 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

補助素材（CSS部分）を用意します

rrreee私のアイデアはこれです、liに相対的な位置と小さな円を与えます絶対配置 して、小さな円 navCircle にアニメーションを追加し、CSS3 スケーリングを使用して大きくします。 なぜ 200 倍と 0.4 秒なのかについては、テストした結果、この方が使いやすいです。 、残りは複数試すこともできます。

Fire Cooking (js part)🎜🎜rrreee🎜 コードはとても簡単です。誰もがそれを推測していると思います。li をクリックすると、小さな円にクラス 'act' を追加し、開始を設定します。小さな円の位置で、タッチの監視が終了したら、クラス 'act' をキャンセルします。 layerY コードはありません。長い間検索しましたが、このプロパティが見つかりませんでした。そして、なぜ <a href="http://www.php.cn/wiki/127.html" target="_blank">forEach🎜</a> を使用しないのですか。一部のブラウザではサポートされていません。」とベンは涙します。 ==! 🎜🎜フレンドリーなリマインダー! touchend はモバイル端末のみをサポートします🎜🎜🎜End🎜🎜🎜 この部分は、Android アプリにこの機能があるため、h5 でそれを行う方法を見ていきたいと思います。時間が経つにつれて大きくなりましたが、実装してからパフォーマンスが良くないと感じたので、この機能が完璧になり、このパッケージが誕生しました。 🎜

以上がネイティブjsを使用してリップルボタンを実装する簡単なサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。