js는 주소록의 인덱스 슬라이딩 표시 효과와 슬라이딩 표시 앵커 포인트 효과를 구현합니다.

아래 편집기에서는 주소록의 인덱스 슬라이딩 표시 효과와 슬라이딩 표시 앵커 포인트 효과를 구현하는 js 기사를 가져올 것입니다. 에디터가 꽤 좋다고 생각해서 지금 공유해서 참고용으로 올려보겠습니다. 에디터를 따라가며

구현용으로만 살펴보겠습니다. . 성능 최적화는 고려되지 않았습니다. 그래서 나중에 특수카드를 구현하게 됐어요.

첫 번째는 주소록 오른쪽에 있는 인덱스 바를 슬라이드하면 해당 문자로 슬라이드하면 해당 문자의 앵커 포인트로 이동합니다.

아이디어: touchmove 이벤트를 듣고 clientX 및 clientY를 가져와 elementFromPoint에 전달한 다음 요소를 가져온 후 click()을 실행합니다.

여기에 문제가 있습니다. 즉, 페이지에 마스크 레이어와 같은 최상위 요소가 있는 경우 요소의 표시:없음이 쓸모 없더라도 포인터 이벤트:없음을 설정하세요. , 연습은 진정한 지식을 가져옵니다. 시도해 볼 수 있습니다.

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

두 번째는 페이지가 특정 문자 위치로 슬라이드될 때 문자를 표시하고 깜박이게 하고 싶다는 것입니다. .

아이디어: 스크롤 이벤트를 듣고, 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 중국어를 지원합니다.

주소록의 인덱스 슬라이딩 표시 효과 및 슬라이딩 표시 앵커 포인트 효과에 대한 더 많은 j 구현을 보려면 PHP 중국어 웹사이트에 주목하세요!

관련기사 :

PHP는 온라인 주소록 기능(소스코드 첨부), 주소록 소스코드 구현

HTML5에 대한 자세한 설명 주소록 취득 사양 다중 개인정보 샘플 코드

XML 데이터 아일랜드를 Dom과 결합하여 주소록을 생성하는 상세 코드 예시