Js implements index slide display and slide display of the address book

The following small series will bring you an article about the index slide Display Effect of the address book and the slide display anchpoint Effect of js. I think this is quite good. Now I will share it with you and give you a reference. Let's take a look at the following small series to bring you a js index sliding Display Effect of the address book and the sliding display anchor effect. I think this is quite good. Now I will share it with you and give you a reference. Let's take a look at it with xiaobian.

Only implement .. Performance optimization is not considered at all. So I implemented a special card later.

The first one is to slide the index bar on the right of the address book, and slide to the corresponding letter to jump to the corresponding letter's anchor.

Ideas:Listen to the touchmove event, obtain clientX and clientY, pass in to elementFromPoint, and then obtain the element and execute click.

There is a problem here, that is, if you have top-level elements such as the mask layer on your page, please set pointer-events: none, even if the display: none of this element is useless, practice. You can try it out.

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();  });

Second, I want to display this letter when the page slides to a letter.

Ideas:Listen to scroll events, and use elementFromPoint to obtain the corresponding elements of the desired location, and then execute the display effect.

Ps: weui is used

$(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 achieves index slide display of the address book and slide display of the anchor effect is all the content that I have shared with you. I hope you can give me a reference and support PHP.

For more js implementations of index slide display effects of address book and slide display anchor effect, please pay attention to PHP Chinese network!

Related Articles:

Php implements the online address book function (with source code) and Address Book source code

Detailed description of the sample code used by the HTML5 address book to obtain the information of multiple specified individuals

Detailed description of code example for creating address book with XML data island and Dom