아래 편집기에서는 주소록의 인덱스 슬라이딩 표시 효과와 슬라이딩 표시 앵커 포인트 효과를 구현하는 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는 온라인 주소록 기능(소스코드 첨부), 주소록 소스코드 구현