js implements the index sliding display effect and sliding display anchor point effect of the address book

The following editor will bring you a js article to implement the index sliding display effect and sliding display anchor point effect of the address book. The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor and take a look.

Only for implementation. . No consideration was given to performance optimization. So I implemented the special card later.

The first one is to slide on the index bar on the right side of the address book. When you slide to the corresponding letter, it will jump to the anchor point of the corresponding letter.

Idea: Listen to the touchmove event, obtain clientX and clientY, pass them to elementFromPoint, and then execute click() after obtaining the element.

There will be a problem here, that is, if there is a top-level element such as a mask layer in your page, please set its pointer-events:none, even if the element's display:none; is useless , Practice brings true knowledge. You can try it.

index is the id of index p

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

The second one is that I want to display and flash the letter when the page slides to the position of a certain letter.

Idea: Listen to the scroll event, also use elementFromPoint to get the corresponding element at the position you want, and then perform the display effect.

ps: I am using 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, it’s over.

The above js implementation of the index sliding display effect and sliding display anchor point effect of the address book is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support PHP Chinese. net.

For more js implementation of the index sliding display effect and sliding display anchor point effect of the address book, please pay attention to the PHP Chinese website!

Related articles:

php implements online address book function (source code attached), address book source code

Detailed explanation of HTML5 address book acquisition specification Sample code for multiple people's information

Detailed code example of using XML data island combined with Dom to create an address book