hammer js 예제

디자인은 셔츠의 앞면과 뒷면 사이에 좌우로 스 와이프하는 방법을 요구했다 – 즉, 슬라이더. 그러나 이 태그에서 다른 모든 것들이 진행중이기 때문에 마케팅 페이지를 위한 일반적인 슬라이더 라이브러리의 일반적인 사용 사례는 아닙니다. 그래서 내 자신의 정신을 위해 – 그리고 린 실행 응용 프로그램을 유지하기 위해 – 나는 바닐라 자바 스크립트와 HammerJS의 조금으로 내 자신의했다. touchAction을 자동으로 설정하면 기본값을 방지하지 못하며 해머가 깨질 수 있습니다. 이 문제를 해결하기 위해 수동으로 default를 호출해야합니다. 현재 수행 내용을 알고 있는 경우에만 이 작업을 사용해야 합니다. 우리는 수평 슬라이더를 구축하고 있기 때문에, deltaX는 가장 유용 할 것입니다. 제스처가 시작된 위치와 마지막으로 등록된 터치 이벤트가 있었던 위치 사이의 순 수평 거리를 추적합니다. 이것이 얼마나 편리한지 설명하기 위해 HammerJS 없이 수행해야 할 작업을 비교해 보겠습니다: 재사용 가능한 제스처 인식기로 완전히 다시 작성되었으며 가능하면 터치 액션 css 속성을 사용하여 최근 모바일 브라우저에 대한 지원이 향상되었습니다. 또한 여러 개의 해머 인스턴스를 동시에 지원하므로 멀티 터치가 가능해집니다.

HammerJS는 바닐라 자바 스크립트 마우스와 터치 이벤트를 모방 7kb 멀티 터치 라이브러리입니다. 현재 위치를 추적하기 위해 clientX 및 clientY와 같은 예상 된 물건을 얻을 수 있지만 deltaX, deltaY, 거리, 방향, 회전 및 배율과 같은 새로운 속성과 함께 스 와이프, 핀치 및 회전과 같은 새로운 이벤트에 액세스 할 수 있습니다. 그것은 당신의 선택, 하지만 난 HammerJS와 고집 해요. Hammer는 필요할 때 이 속성에 대한 자바스크립트 대체를 사용하므로 지원되지 않는 브라우저에서도 작동합니다. 그러나 일부 (인기없는) 장치에서는 대체가 기본 지원만큼 작동하지 않을 수 있습니다. 슬라이더, 회전 목마 및 그 사이에 모든 것을 위한 수많은 사전 제작 된 라이브러리가 있으며, 매년 마다 주요 라이브러리가 나오는 것처럼 보입니다. 대부분의 작업이 진공 상태에서 잘 작동하지만, 침입적인 JavaScript, CSS 및 비대한 태그없이 기존 모바일 앱 중간에 부분 또는 전체 슬라이더를 추가해야 할 때 선택이 빠르게 좁아지습니다. 이러한 시나리오에서 HammerJS는 생각보다 처음부터 구축하는 것이 더 쉽고 시간 효율적일 수 있도록 하여 구조에 옵니다. 저는 매니저와 함께 일하는 것을 선호합니다.

독립 실행형 새 Hammer() 구문과 비교하여 관리자는 동일한 요소에 여러 이벤트(예: 핀치 및 팬)를 함께 묶을 수 있는 유연성을 제공합니다. 예를 들어 최신 iOS 사진 앱에서 핀치 + 회전 제스처를 다시 만들려면 관리자를 사용하여 HammerJS에서 이 작업을 수행할 수 있습니다. 관리자는 예제와 같이 하나의 이벤트만 수신대기하는 경우 이점이 없지만 코드를 다시 정렬하지 않고 필요한 경우 나중에 추가 이벤트를 추적할 수 있기 때문에 기본적으로 이 작업을 수행합니다. 해머는 터치, 마우스 및 포인터이벤트에 의해 만들어진 제스처를 인식할 수 있는 오픈 소스 라이브러리입니다. 그것은 어떤 종속성이 없습니다, 그것은 작은, 단지 7.34 kB 채굴 + gzipped! Hammer는 브라우저에서 터치 지원을 에뮬레이트하는 디버그 도구를 제공합니다.

Previous post

ev3 예제

Next post

java gridbaglayout 예제

sovab-presse

sovab-presse