欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實(shí)現(xiàn)做通訊錄的索引滑動(dòng)顯示效果和滑動(dòng)顯示錨點(diǎn)效果

 更新時(shí)間：2017年02月18日 09:23:49   投稿：jingxian  
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)做通訊錄的索引滑動(dòng)顯示效果和滑動(dòng)顯示錨點(diǎn)效果。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

只做實(shí)現(xiàn)。。完全沒(méi)考慮性能優(yōu)化。所以我實(shí)現(xiàn)了以后特別卡。

第一個(gè)是在通訊錄右邊的索引條上進(jìn)行滑動(dòng)，滑動(dòng)到相應(yīng)字母就跳轉(zhuǎn)到相應(yīng)字母的錨點(diǎn)上。

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

這里會(huì)有個(gè)問(wèn)題，就是如果你的頁(yè)面中有遮罩層這一類的頂層元素的話，請(qǐng)將其pointer-events:none，就算這個(gè)元素的display:none;也沒(méi)用，實(shí)踐出真知。可以去試下。

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

第二個(gè)我是想在頁(yè)面滑動(dòng)到某個(gè)字母的位置時(shí)顯示閃一下這個(gè)字母。

思路：監(jiān)聽(tīng)scroll事件，同樣利用elementFromPoint獲取你想要的位置的對(duì)應(yīng)元素，然后執(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);
  }
 });

好了，結(jié)束。

以上這篇js實(shí)現(xiàn)做通訊錄的索引滑動(dòng)顯示效果和滑動(dòng)顯示錨點(diǎn)效果就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論