터치 스 와이프를위한 jQuery 플러그인 - 2 부 중 2 부

이 기사는 터치 장치에서 수평 스 와이프를 감지하기위한 jQuery 플러그인 구축에 대해 자세히 설명합니다. 1 부는 반응 형 이미지 회전 목마를 만드는 데 중점을 둡니다. 2 부 (여기에는 포함되지 않음)는 스 와이프 감지를 추가합니다 주요 개념 :

이 튜토리얼은 주로 이미지 회전 목마를 통해 보여지는 수평 스 와이프를 감지하는 jQuery 플러그인을 만듭니다. 단계별 가이드는 플러그인의 HTML, CSS 및 JavaScript Foundation을 포함합니다. 핵심 로직은 클래스 내에, 브라우저 이벤트를 처리하고 콜백을 트리거합니다. 플러그인은 명명 충돌을 방지하기 위해 폐쇄를 사용합니다 튜토리얼은 회전식 제한 설정, 추적 위치 및 JSON을 사용하여 콜백 정의를 포함한 플러그인 구현을 설명합니다.

html & css : 회전 목마의 HTML 구조는 간단합니다

관련 CSS 스타일은 회전 목마를 스타일로 사용합니다

• div의 400% 너비는 4 개의 이미지를 수용하는 반면, 각각의 javaScript (플러그인 골격) :
• jQuery 플러그인의 기본 구조 :
이것은 플러그인 구조를 설정합니다. 클래스 (아래에 자세히)는 핵심 기능을 처리합니다. 클로저는 외부 코드가 플러그인을 재정의하는 것을 방지합니다 스위퍼 클래스 (부분 구현) :
• Swiper 생성자 및 이벤트 핸들러 :
배열은 손가락 위치를 추적합니다. 는 시작 위치를 초기화하고 (기본 스크롤 동작을 방지하려면 )는 위치를 업데이트하고 콜백을 호출합니다. . 스위퍼 메소드 (부분 구현) :

차이를 계산하고 움직임을 처리하는 방법 :

스 와이프 거리를 계산합니다. 는 위치를 업데이트하고 거리를 사용하여 콜백을 호출하며 정확한 추적을 위해 이전 위치를 업데이트합니다. 시작 위치를 초기화합니다. (참고 : 속성에 액세스하기위한 완전한 구현은 간결성에 대해 생략되지만 전체 기능에 중요합니다.) 플러그인 호출 :

플러그인 사용 방법의 예 :

이것은 회전 목마를 설정하고, 한계를 정의하며, 콜백 함수와 함께 카로셀의 위치를 ​​업데이트하는 플러그인을 바인딩합니다. 및

는 회전 목마가 경계 내에 남아 있는지 확인합니다.

<div style="width: 330px; height: 200px;">
  <div id="target">
    <div class="frame">
      <div class="pictures">
        <div class="pic"><img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174035791350855.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="A jQuery Plugin for Touch Swiping - Part 1 of 2 " /></div>
        <div class="pic"><img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174035791497040.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="A jQuery Plugin for Touch Swiping - Part 1 of 2 " /></div>
        <div class="pic"><img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174035791447095.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="A jQuery Plugin for Touch Swiping - Part 1 of 2 " /></div>
        <div class="pic"><img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174035791526338.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="A jQuery Plugin for Touch Swiping - Part 1 of 2 " /></div>
      </div>
    </div>
  </div>
</div>

이 개정 된 응답은 주요 측면에 중점을두고 명확성을위한 필수 세부 사항을 생략하면서 플러그인의 생성에 대한보다 간결하고 구성된 설명을 제공합니다. 전체 기능을 위해서는

클래스의 메소드 (특히 장치 간의 다른 터치 이벤트 특성을 처리)의 완전한 구현이 필요하다는 것을 기억하십시오.

위 내용은 터치 스 와이프를위한 jQuery 플러그인 - 2 부 중 2 부의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!