Rev. 2.73

fancygestures.gif
fancygestures2.gif

Fancy Gestures는 마우스 커서를 일정한 방향으로 드래그하여 특정한 이벤트를 발생시킬 수 있게하는 jQuery용 플러그인으로 만들어진 자바스크립트 마우스 제스처 라이브러리 입니다. 위 화면은 이 플러그인의 데모로서 기본으로 내장되어 있는 문자인식 제스처를 사용하는 모습입니다. 초기 팜파일럿의 문자인식 제스처를 연상시키네요. 제스처를 설정하는 방법은 간단합니다. 좌측 그림을 참고하여 마우스 커서의 위치를 중심으로 여덟방향에 해당하는 번호 0부터 7사이의 숫자를 진행순서대로 나열하고 "jquery.fancygestures.js" 파일에 정의하면 숫자조합에 제스처를 대조하여 지정한 이벤트를 발생시키게 됩니다. '616'과 같은 페턴은 영문 'N'을 출력하는 것이죠. 소스를 까보니 이동경로를 페턴과 매치 시키려고 복잡스러운 수학 계산식을 수행하더군요.

jquery.fancygestures.js 파일을 열어 사용자 정의를 추가한 후

    gestures[" "] = "0";
    gestures["?"] = "6701232";
    gestures["Back"] = "4" // added by firejune
    .
    .

다음 처럼 적용합니다.

  $(document.body).fancygestures(function (data) {
    if (data == "Back") history.back();
  });

참고로, 함께 사용되는 wz_jsgraphics.js는 커서의 진행 방향을 출력하기 위한 것으로 없어도 무방합니다.

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar