js實作做通訊錄的索引滑動顯示效果和滑動顯示錨點效果

下面小編就為大家帶來一篇js實現做通訊錄的索引滑動顯示效果和滑動顯示錨點效果。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧

只做實現。 。完全沒考慮效能優化。所以我實現了以後特別卡。

第一個是在通訊錄右邊的索引條上進行滑動，滑動到對應字母就跳到對應字母的錨點上。

思路：監聽touchmove事件，取得clientX和clientY，傳入到elementFromPoint，然後取得到元素以後執行click()即可。

這裡會有個問題，就是如果你的頁面中有遮罩層這一類的頂層元素的話，請將其pointer-events:none，就算這個元素的display:none;也沒用，實踐出真知。可以去試試。

index為索引p的id

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

第二個我是想在頁面滑動到某個字母的位置時顯示閃一下這個字母。

思路：監聽scroll事件，同樣利用elementFromPoint取得你想要的位置的對應元素，然後執行顯示效果即可。

ps: 使用的是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);
  }
 });

好了，結束。

以上這篇js實現做通訊錄的索引滑動顯示效果和滑動顯示錨點效果就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持PHP中文網。

更多js實現做通訊錄的索引滑動顯示效果和滑動顯示錨點效果相關文章請關注PHP中文網！

相關文章：

php實作線上通訊錄功能（附源碼），通訊錄源碼

詳解HTML5通訊錄取得指定多個人的信息的範例程式碼

以XML資料島結合Dom製作通訊錄的程式碼實例詳解