Einfacher Beispielcode zum Implementieren der Ripple-Schaltfläche mit nativem JS

In diesem Artikel wird hauptsächlich der native js zur Implementierung eines einfachen Beispielcodes für die Ripple--Schaltfläche vorgestellt, der einen gewissen Referenzwert hat.

Organisieren Sie die Dokumente, suchen Sie nach einem nativen JS-Code, um eine einfache Ripple-Schaltfläche zu implementieren, sortieren Sie ihn ein wenig und optimieren Sie ihn für die Weitergabe.

Der Effekt ist wie unten gezeigt

Vorbereitung der Zutaten (HTML-Teil)

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

Typisches Menülayout, innen span.circle stellt einen kleinen Kreis dar, der bei Berührung auftaucht.

Hilfsmaterialien vorbereiten (CSS-Teil)

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

Meine Idee ist folgende: relative Position des Li, absolute Position für den kleinen Kreis, und dann den kleinen Kreis hinzufügen Kreis Die Animation navCircle verwendet CSS3-Skalierung, um sie um das 200-fache und .4s zu vergrößern. Nach dem Testen ist sie benutzerfreundlicher.

Feuerkochen (js-Teil)

 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)

   }

Der Code ist sehr einfach. Ich glaube, jeder hat es erraten. Fügen Sie dem kleinen Kreis Klasse hinzu 'act' Und legen Sie die Startposition des kleinen Kreises fest. Brechen Sie den Unterricht ab. 'act' Warum verwenden Sie nicht touchstart? > Attribut, ich konnte es lange nicht finden. Und warum nicht <a href="http://www.php.cn/wiki/127.html" target="_blank">forEach<code>layerY verwenden, einige Browser unterstützen es nicht. , brach in Tränen aus = =! <a href="http://www.php.cn/wiki/127.html" target="_blank">forEach</a>

Freundliche Erinnerung!

Unterstützt nur mobile Endgerätetouchend

Ende

Der Grund für diesen Teil ist, dass unsere Android-App diese Funktion hat, also möchte ich sehen, wie h5 das macht . Die Idee war, die Breite und Höhe mit der Zeit zu erhöhen, aber nach der Implementierung hatte ich das Gefühl, dass die Leistung nicht gut war, also dachte ich darüber nach, das Vielfache zu erhöhen. Dann wurde diese Funktion perfekt und war geboren Paket!

Das obige ist der detaillierte Inhalt vonEinfacher Beispielcode zum Implementieren der Ripple-Schaltfläche mit nativem JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!