js implementiert den Index-Gleitanzeigeeffekt und den Gleitanzeige-Ankerpunkteffekt des Adressbuchs

Der folgende Editor bringt Ihnen einen JS-Artikel zur Implementierung des Index-Sliding-Display-Effekts und des Sliding-Display-Ankerpunkteffekts des Adressbuchs. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und werfen wir einen Blick darauf

Nur ​​zur Umsetzung. . Auf eine Leistungsoptimierung wurde keine Rücksicht genommen. Also habe ich die Sonderkarte später implementiert.

Die erste Möglichkeit besteht darin, auf der Indexleiste auf der rechten Seite des Adressbuchs zu gleiten. Wenn Sie zum entsprechenden Buchstaben gleiten, springt dieser zum Ankerpunkt des entsprechenden Buchstabens.

Idee: Hören Sie sich das Touchmove-Ereignis an, holen Sie sich clientX und clientY, übergeben Sie sie an elementFromPoint und führen Sie dann click() aus, nachdem Sie das Element erhalten haben.

Hier liegt ein Problem vor. Wenn Ihre Seite ein Element der obersten Ebene hat, z. B. eine Maskenebene, setzen Sie bitte deren Zeigerereignisse: Keine, auch wenn die Anzeige: Keine des Elements nutzlos ist. Die Praxis bringt wahres Wissen. Sie können es versuchen.

index ist die ID des Index p

$("#index").get(0).addEventListener('touchmove',function(event){
   var a = document.elementFromPoint(event.touches[0].clientX,event.touches[0].clientY).parentNode;
   a.click();
  });

Der zweite Punkt ist, dass ich den Buchstaben anzeigen und blinken lassen möchte, wenn die Seite an die Position von a gleitet bestimmter Buchstabe.

Idee: Hören Sie sich das Scroll-Ereignis an, verwenden Sie auch elementFromPoint, um das entsprechende Element an der gewünschten Position abzurufen, und führen Sie dann den Anzeigeeffekt aus.

ps: Ich benutze weui

$(window).scroll(function(){
  var a = document.elementFromPoint(0,0);
  if($(a).hasClass("weui_cells_title"))
  {
   $(".weui_toast_content_my").html($(a).attr("name"));
   $("#toast").show(0);
   $("#toast").slideUp(300);
  }
 });

Okay, es ist vorbei.

Die obige js-Implementierung des Index-Schiebeanzeigeeffekts und des Schiebeanzeige-Ankereffekts des Adressbuchs ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe auch, dass dies jeder tun wird unterstützt PHP-Chinesisch.

Weitere js-Implementierungen des Index-Sliding-Display-Effekts und des Sliding-Display-Ankerpunkteffekts des Adressbuchs finden Sie auf der chinesischen PHP-Website!

Verwandte Artikel:

PHP implementiert Online-Adressbuchfunktion (Quellcode angehängt), Adressbuch-Quellcode

Detaillierte Erläuterung von HTML5 Adressbucherfassungsspezifikation Beispielcode für mehrere persönliche Informationen

Detailliertes Codebeispiel für die Verwendung von XML Data Island in Kombination mit Dom zum Erstellen eines Adressbuchs