jQuery | 仿可連續Swipe效果

本篇文章僅簡單敘述是如何達成這樣的過程,而nextdown和nextup function內容可以自己增加和更改,本來目的只是讓普通網頁達成仿手機的swipe效果。



//初始設定為不啟動,當按下時才啟動,而追蹤只有在第一次才會啟動,因為為了獲取初始位置
var cursor_active=false,cursor_track;
$(document).mousedown(function(){cursor_active=true;cursor_track=true;}).mouseup(function(){cursor_active=false;}).mousemove(function(e){
    if(cursor_active){
        //獲取初始位置
        if(cursor_track){cursor_y=e.pageY;cursor_track=false;}
        //當向下80px便執行一次 nextdown()
        //可自由更改數值
        if(cursor_y + 80 < e.pageY){cursor_y=e.pageY; nextdown();}
        //當向上80px便執行一次 nextdown()
        //可自由更改數值
        if(cursor_y - 80 > e.pageY){cursor_y=e.pageY; nextup();}
    }
})

function nextdown() {
    //效果
}

function nextup() {
    //效果
}


這效果就會非常類似連續的swipe效果,雖然沒有做任何特效,但是您可以加上任何特效來仿製Ap家產品的效果

參考資料
jQuery API

0 件のコメント:

コメントを投稿