js implémente l'effet d'affichage coulissant d'index et l'effet de point d'ancrage d'affichage coulissant du carnet d'adresses

L'éditeur suivant vous proposera un article js pour implémenter l'effet d'affichage coulissant d'index et l'effet de point d'ancrage d'affichage coulissant du carnet d'adresses. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un coup d'œil

Uniquement pour la mise en œuvre. . Aucune considération n’a été accordée à l’optimisation des performances. J'ai donc implémenté la carte spéciale plus tard.

La première consiste à glisser sur la barre d'index sur le côté droit du carnet d'adresses. Lorsque vous glissez sur la lettre correspondante, il passera au point d'ancrage de la lettre correspondante.

Idée : Écoutez l'événement touchmove, récupérez clientX et clientY, transmettez-les à elementFromPoint, puis exécutez click() après avoir obtenu l'élément.

Il y a un problème ici, c'est-à-dire que si votre page a un élément de niveau supérieur tel qu'un calque de masque, veuillez définir ses pointer-events:none, même si l'élément display:none est inutile , La pratique apporte la vraie connaissance. Vous pouvez l'essayer.

index est l'identifiant de l'index p

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

Le deuxième est que je veux afficher et faire clignoter la lettre lorsque la page glisse vers la position d'un certaine lettre.

Idée : Écoutez l'événement de défilement, utilisez également elementFromPoint pour obtenir l'élément correspondant à la position souhaitée, puis exécutez l'effet d'affichage.

ps : j'utilise 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);
  }
 });

D'accord, c'est fini.

L'implémentation js ci-dessus de l'effet d'affichage coulissant d'index et de l'effet d'ancrage d'affichage coulissant du carnet d'adresses est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence, et j'espère également que tout le monde le fera. prend en charge PHP chinois net.

Pour plus d'implémentation js de l'effet d'affichage coulissant d'index et de l'effet de point d'ancrage d'affichage coulissant du carnet d'adresses, veuillez faire attention au site Web PHP chinois !

Articles connexes :

PHP implémente la fonction de carnet d'adresses en ligne (code source ci-joint), code source du carnet d'adresses

Explication détaillée du HTML5 Spécification d'acquisition du carnet d'adresses Exemple de code pour plusieurs informations personnelles

Exemple de code détaillé d'utilisation d'un îlot de données XML combiné avec Dom pour créer un carnet d'adresses