[펌] 마우스 제스처 – js

작성자 웅파 작성일자 팁앤텍





[스크립트] [JS] Mouse Gesture






















글쓴이   Seeker 날 짜 08-10-30 21:25 조 회 823
Link1   http://www.seeker.kr/test/mouse_gesture.html (258)






마우스 제스처, 즉 마우스의 이동으로 지정한 동작을 실행하는 기능입니다.

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);