スワイプ的なやつ

やってみた

//MOUSE ACTIONS
var xx = 0,now = 0,
index,
len = img_arr.length;

$page.on("mousedown",onDowmEvent);
$page.on("mouseup",onUpEvent);

//MOUSE DOWN
function onDowmEvent(evt){
    $page.on("mousemove",onMoveEvent);
    $page.on("mouseleave",onLeaveEvent);
    now = $top.position().left;
    xx = evt.pageX;
    myevent.stop(evt);
}

//MOUSE MOVE
function onMoveEvent(evt){
    $top.stop().animate({
        "left" : now + evt.pageX - xx
    },0);
}

//MOUSE LEAVE
function onLeaveEvent(evt){
    onUpEvent(evt);
}

//MOUSE UP
function onUpEvent(evt){
    $page.off("mousemove",onMoveEvent);
    $page.off("mouseleave",onLeaveEvent);
   
    //NEXT
    if((xx - evt.pageX) > 100){
        if(ite2.current() != ite2.last()){
            ite2.next();
            $top.stop().animate({
                "left" : ite2.current() * -$width
            },300);
        }else{
            $top.stop().animate({
                "left" : now
            },300);
        }
       
    //PREV
    }else if((xx - evt.pageX) < -100){
       
        if(ite2.current() !== ite2.first()){
            ite2.prev();
            $top.stop().animate({
                "left" : ite2.current() * -$width
            },300);
        }else{
            $top.stop().animate({
                "left" : now
            },300);
        }
   
    //NO EXIST NEXT or PREV
    }else{
        $top.stop().animate({
            "left" : now
        },300);
    }
}

[mousedown]で preventDefaul tなり returnValue = false なりをしておかないと、画像をドラッグしちゃう

[mousedown]時のpageX値を格納して、[mousemove]時のpageXとの差分を出して実装

[mousemove]は[mousedown]時に登録[mouseup]で解除する

念のために[mouseleave]を登録しておく

「ite2」って単なる数字の入ったiterator

スワイプ的なやつ

※PCでのスワイプ的なやつってことで

 

Comments are closed.