|
마우스 제스처, 즉 마우스의 이동으로 지정한 동작을 실행하는 기능입니다.
FF는 이 기능을 사용할 수 있는 부가기능이 몇개 있고, 아예 제스처 기능이 기본으로 내장된 브라우저도 있지만 IE는 전혀 상관없기 때문에…
단축키 기능을 만들고 난 뒤 문득 이것도 있으면 편리하겠다 싶어서 만들어 봤습니다.
_gestures 에 동작과 함수를 지정하면 됩니다.
링크된 페이지에서 간단한 동작을 확인할 수 있습니다.
# 동작 : U(up) / D(down) / R(right) / L(left) 의 4가지 방향으로 구성
# 단계 제한은 없음. (하지만 많아도 3단계 이하로 지정하는게 사용에 편리)
# 20픽셀 이상의 동작만 인식 (인식 길이 조정 가능)
# 방향 구분은 60도, 즉 수직에서 좌우 30도(합 60도) 이내의 범위를 지나면 U 혹은 D이고 수평에서 상하 30도 이내의 범위를 지나면 R 혹은 L 판정 (범위 조정 가능)
# IE6/7, FF3, 크롬에서 테스트했습니다.
/*
이 스크립트에 대한 모든 권리는 제작자에게 있습니다.
스크립트를 이용하려면 제작자를 반드시 표기해야 합니다.
제작자 : Seeker
제작자 홈페이지 : http://www.seeker.kr/
*/
// 이벤트 부여 함수
function addEvent(target,e,f) {
if(window.addEventListener)
target.addEventListener(e,f,false);
else if(window.attachEvent)
target.attachEvent(“on”+e,f);
else
target[“on”+e] = f;
}
function removeEvent(target,e,f) {
if(window.removeEventListener)
target.removeEventListener(e,f,false);
else if(window.detachEvent)
target.detachEvent(“on”+e,f);
else
target[“on”+e] = null;
}
// 액션 리스트
var _gestures = {
U : [“스크롤 UP”,function() {document.documentElement.scrollTop -= document.documentElement.clientHeight;}],
D : [“스크롤 DOWN”,function() {document.documentElement.scrollTop += document.documentElement.clientHeight;}],
LU : [“페이지 상단”,function() {document.documentElement.scrollTop = 0;}],
LD : [“페이지 하단”,function() {document.documentElement.scrollTop = document.documentElement.scrollHeight;}],
R : [“앞으로”,function() {history.forward();}],
L : [“뒤로”,function() {history.back();}],
DR : [“새 창(탭) 열기”,function() {window.open(‘about:blank’);}],
DL : [“창(탭) 닫기”,function() {window.close();}],
DU : [“창(탭) 복사”,function() {window.open(location.href);}],
UD : [“새로 고침”,function() {location.reload();}]
}
// 사용 전역변수 선언
var _g_pX,_g_pY,_g_tX,_g_tY;
var _g_path = “”;
var _g_target;
var _g_t_dir = “”;
// 마우스 다운시
function _g_down(e) {
var e = e || event;
_g_path = “”;
_g_target = e.target || e.srcElement;
if(e.button == 2) {
_g_pX = _g_tX = e.clientX;
_g_pY = _g_tY = e.clientY;
addEvent(document,”mousemove”,_g_move);
addEvent(document,”mouseup”,_g_up);
} else {
removeEvent(document,”mousemove”,_g_move);
removeEvent(document,”mouseup”,_g_up);
}
}
// 마우스 업시
function _g_up(e) {
if(e.button == 2) {
if(_g_path in _gestures) _gestures[_g_path][1]();
removeEvent(document,”mousemove”,_g_move);
removeEvent(document,”mouseup”,_g_up);
}
}
// 컨텍스트 메뉴 방지용 리턴 막는 함수
function _g_false(e) {
if(_g_path) {
var e = e || event;
if(e.preventDefault) e.preventDefault();
if(“returnValue” in e) e.returnValue = false;
return false;
}
}
addEvent(document,”contextmenu”,_g_false);
// 마우스 이동시
function _g_move(e) {
var e = e || event;
var x = e.clientX;
var y = e.clientY;
var mX = x – _g_pX;
var mY = _g_pY – y;
var dir;
if(mX == 0) {
if(mY > 0) dir = “U”;
else if(mY < 0) dir = “D”;
else return;
} else {
var slope = mY/mX;
if(slope > 2 || slope < -2) {
if(mY > 0) dir = “U”;
else dir = “D”;
} else if(slope < 0.5 && slope > -0.5) {
if(mX > 0) dir = “R”;
else dir = “L”;
}
}
if(dir && dir != _g_path.charAt(_g_path.length-1)) {
if(_g_t_dir != dir) {
_g_tX = _g_pX;
_g_tY = _g_pY;
}
if(Math.abs(x-_g_tX) > 20 || Math.abs(_g_tY-y) > 20) {
_g_path += dir;
}
}
_g_t_dir = dir;
_g_pX = x;
_g_pY = y;
window.status = _g_path + ((_g_path in _gestures)?(” : ” + _gestures[_g_path][0]):””);
}
addEvent(document,”mousedown”,_g_down); |
|
글쓴이
Seeker