Simple example code to implement Ripple button using native js

This article mainly introduces the native jsimplementation of simple Ripplebutton example code, which has certain reference value. Interested friends can refer to it.

Organize the documents, search out a native js code to implement a simple Ripple button, sort it out and streamline it a little for sharing.

The effect is as shown

Prepare ingredients (html part)

 <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>

Typical menu li layout, insidespan.circle represents the small circle that pops up when touched.

Prepare auxiliary materials (css part)

 #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%;}
 }

My idea is this, give li relative positioning, give the small circle absolute positioning, and then add animation to the small circlenavCircle, use CSS3 scaling to make it larger. As for why it is 200 times and .4s, after testing, it is more user-friendly. You can also try the other multiples.

Fire cooking (js part)

 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)

   }

The code is very simple, I believe everyone has guessed it. When clicking li, add class 'act' to the small circle , and set the starting position of the small circle, when the monitoring touch ends, cancel the class 'act', someone must ask, why don't you use touchstart, ugh , because there is no attribute layerY, so I couldn’t find it after searching for a long time. And why not use <a href="http://www.php.cn/wiki/127.html" target="_blank">forEach</a>? Some browsers don’t support it. Tears = =!

friendly reminder! touchendOnly supports mobile terminal

End

I do this part because our Android app has this function, so I want to take a look at h5 How to do it? The initial idea was to make the width and height increase over time, but after implementing it, I felt that the performance was not good, so I thought of directly increasing the multiple. Then this function became perfect and was born. Start enjoying this package!

The above is the detailed content of Simple example code to implement Ripple button using native js. For more information, please follow other related articles on the PHP Chinese website!