小編給大家分享一下js如何實現做通訊錄的索引滑動顯示效果和滑動顯示錨點效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司主要從事網站建設、網站制作、網頁設計、企業(yè)做網站、公司建網站等業(yè)務。立足成都服務中江,10多年網站建設經驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:13518219792

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

思路：監(jiān)聽touchmove事件，獲取clientX和clientY，傳入到elementFromPoint，然后獲取到元素以后執(zhí)行click()即可。

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

index為索引div的id

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

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

思路：監(jiān)聽scroll事件，同樣利用elementFromPoint獲取你想要的位置的對應元素，然后執(zhí)行顯示效果即可。

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如何實現做通訊錄的索引滑動顯示效果和滑動顯示錨點效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網站名稱：js如何實現做通訊錄的索引滑動顯示效果和滑動顯示錨點效果
瀏覽路徑：http://vcdvsql.cn/article4/pepsoe.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、網頁設計公司、服務器托管、外貿網站建設、網站建設、電子商務

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)