滑動螢幕開啟相應功能操作。
1、使用者手動滑動螢幕,根據滑動的方向,開啟相應的功能(如:向上滑搖錢樹經驗明細,向下滑開啟任務明細,向左滑開啟聚寶盆物品檢視等功能),滑動事件捕獲問題。
3、html5提供的滑動事件,只能讀取到起點和終點座標,計算角度問題。
4、手機螢幕座標與標準座標系轉換問題。
1、滑動螢幕事件使用html5 的touchstart滑動開始事件和touchend滑動結束事件。
2、方向的判斷,以起點做平面座標系,與終點連線做直線,直線與x正半軸計算角度;我們以45度角為方向分割線,如:只要滑動角度大於等於45度且小於135度,則判斷它方向為向上滑。
3、使用math.atan2來計算起點與終點形成的直線角度。
4、仔細對比標準座標系與螢幕座標系,我們發現,標準座標系,上半軸為負值,要實現轉換,只需要調換y座標起點與終於位置即可。
處理**如下:
//返回角度function getslideangle(dx, dy)
//根據起點和終點返回方向 1:向上,2:向下,3:向左,4:向右,0:未滑動
function getslidedirection(startx, starty, endx, endy)
var angle = getslideangle(dx, dy);
if (angle >= -45 && angle < 45) else if (angle >= 45 && angle < 135) else if (angle >= -135 && angle < -45)
else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135))
return result;
}//滑動處理
var startx, starty;
document.addeventlistener('touchstart', function (ev) , false);
document.addeventlistener('touchend', function (ev)
}, false);
js判斷手指滑動方向(移動端)
varstartx,starty 獲得角度 function getangle angx,angy 根據起點終點返回方向 1向上 2向下 3向左 4向右 0未滑動 function getdirection startx,starty,endx,endy varangle getangle angx...
移動端網頁判斷手指觸控滑動的方向
判斷使用者手指滑動的方向,一種比較通用的解決方法就是,記錄使用者手指剛接觸螢幕的位置,然後減去使用者手指離開螢幕的位置,然後判斷這個值的正負。body on touchstart function e body on touchmove function e else if x 0 else if ...
Android 關於判斷使用者滑動方向
效果圖如下 預設是上下滑動 true 上下滑動 false 左右滑動 boolean slide true private float translationy private float dy float straty float downy float downx boolean hasmove...