Exemple de code simple pour implémenter le bouton Ripple à l'aide de js natif

Cet article présente principalement des js natifs pour implémenter un simple bouton Ripple exemple de code, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

Organisez les documents, recherchez un code js natif pour implémenter un simple bouton Ripple, triez-le un peu et rationalisez-le pour le partage.

L'effet est comme indiqué ci-dessous

Préparation des ingrédients (partie 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>

Disposition typique du menu, à l'intérieur span.circle représente un petit cercle qui apparaît lorsqu'on le touche.

Préparer le matériel auxiliaire (partie 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%;}
 }

Mon idée est la suivante, positionner relativement le li, position absolue pour le petit cercle, puis ajouter le petit circle L'animation navCircle utilise la mise à l'échelle CSS3 pour la rendre plus grande Quant à savoir pourquoi elle est 200 fois et .4s, elle est plus conviviale après les tests.

Cuisine au feu (partie 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)

   }

Le code est très simple, je crois que vous l'avez deviné, ajoutez de la classe au petit cercle en cliquant sur li 'act', Et définissez la position de départ du petit cercle. Lorsque le contact de surveillance se termine, annulez le cours 'act'. Quelqu'un doit demander, pourquoi n'utilisez-vous pas touchstart ? , je ne l'ai pas trouvé depuis longtemps. Et pourquoi ne pas utiliser <a href="//m.sbmmt.com/wiki/127.html" target="_blank">forEach<code>layerY, certains navigateurs ne le supportent pas. , fondit en larmes = =! <a href="//m.sbmmt.com/wiki/127.html" target="_blank">forEach</a>

Prend en charge uniquement les terminaux mobilestouchend

Fin

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!