> 웹 프론트엔드 > JS 튜토리얼 > 모바일 JQ 플러그인 hammer_jquery 사용에 대한 자세한 설명

모바일 JQ 플러그인 hammer_jquery 사용에 대한 자세한 설명

WBOY
풀어 주다: 2016-05-16 15:51:42
원래의
2080명이 탐색했습니다.

PC에서 모바일까지, 많은 프론트엔드 포위 엔지니어들이 모바일 터미널에 대해 걱정하고 있다고 생각합니다. 독창적인 모바일 이벤트를 작성하는 것은 매우 힘들고, jq의 클릭은 300밀리초 지연이 있습니다. 이제 비교적 좋은 jq 플러그인이 있습니다. hammer, Hammer.js는 다른 것에 의존하지 않고 터치를 인식할 수 있는 오픈 소스 경량 자바스크립트 라이브러리입니다. 마우스 이벤트는 확대/축소, qq 왼쪽 슬라이드 삭제, 확대, 회전 등과 같은 다양한 휴대폰 이벤트를 지원합니다.

다음은 탭 스위치를 사용하여 해머를 소개합니다.

사용법:

1, 먼저 jq2.0 이상 버전과 jquery.hammer.js를 소개합니다.

2, jq와 마찬가지로 요소를 가져오고 끝에 해머를 추가하면 됩니다. var hammertime = $('.tabs a').hammer();

3. on을 사용하여 hammertime.on('tap', function(ev) {} 이벤트를 직접 추가할 수 있습니다. 이는 해머의 탭 클릭 이벤트를 사용합니다. 함수에 자신만의 js를 작성할 수 있습니다.

hammer.dragstart = function(ev) { };// 开始拖动</span>

hammer.drag = function(ev) { }; // 拖动中</span>
hammer.dragend = function(ev) { }; // 拖动结束</span>
hammer.onswipe = function(ev) { }; // 滑动</span>
 
hammer.tap = function(ev) { }; // 单击</span>
hammer.doubletap = function(ev) { }; //双击</span>
hammer.hold = function(ev) { };// 长按</span>
 
hammer.release = function(ev) { }; // 手指离开屏幕</span>

로그인 후 복사

체험링크: http://hammerjs.github.io/

js 코드

$(function() {
  var hammertime = $('.tabs a').hammer();
  hammertime.on('tap', function(ev) {
    $(this).addClass('actives').siblings().removeClass('actives');//添加一个class 同辈级移除。
    var index = $('.tabs a').index(this); //索引
    $('.tab-bott').eq(index).show().siblings().hide(); 
  })
})
로그인 후 복사

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿