Simple Example code for implementing the Ripple button using native js

This article mainly introduces the simple Ripple button instance Code implemented by native js, which has a certain reference value. Interested friends can refer to it. This article mainly introduces the simple Ripple button instance Code implemented by native js, which has a certain reference value. Interested friends can refer to it.

Sort out the document, search for a code for native js to implement a simple Ripple button, and sort it down and share it.

Effect

Prepare ingredients (html part)

 
 
 
  
  
  
Homepage
  
  
  
My
  
  
  
More
 
 
 

Typical menu li layout, includingspan.circleIt indicates a small circle popped up by the touch.

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: relatively positioning li, absolutely positioning small circles, and adding animations to small circles.navCircleUse css3 to zoom in and out. Why is it 200 times and. 4s? After testing, it is more user-friendly. You can also try 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
 
  {    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)   }
 

The code is very simple. As you may have guessed, click li to add a class to the circle. 'act'And set the starting position of the small circle. When the listening touch ends, cancel the class'act'Someone must have asked why you don't need it.touchstartWhy?layerYThis attribute was not found for half a day. Why not?forEachSome browsers do not support it. Tears rush =!

Friendly reminder!touchendOnly mobile terminals are supported

End

This is because our Android app has this function, so I want to see how h5 works. The idea is to increase the width and height over time, however, after implementation, I felt that the performance was not good, so I thought of directly adding multiples. So this function became perfect and began to enjoy this package!

The above is the details of the simple instance code that uses native js to implement the Ripple button. For more information, see other related articles in the first PHP community!