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="http://www.php.cn/wiki/127.html" target="_blank">forEach<code>layerY, certains navigateurs ne le supportent pas. , fondit en larmes = =! <a href="http://www.php.cn/wiki/127.html" target="_blank">forEach</a>

Rappel amical !

Prend en charge uniquement les terminaux mobilestouchend

Fin

La raison de faire cette partie est parce que notre application Android a cette fonction, donc je veux voir comment h5 le fait .Début L'idée était de faire augmenter la largeur et la hauteur avec le temps, mais après l'avoir implémentée, j'ai senti que les performances n'étaient pas bonnes, alors j'ai pensé à augmenter directement le multiple. Puis cette fonction est devenue parfaite et est née. emballer!

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!