對於移動端瀏覽器touch事件的研究總結（4）判斷手指滑動方向
最近有一些微信的專案，雖然頁面很簡單，但配合手勢後的效果卻是很不錯的。最基本的效果就是手指向上滑，頁面配合css3出現一個展開效果，手指向下滑將展開的內容按原路徑收起。其實就是一個簡單的判斷手指滑動方向讓頁面滾動一屏的高度。
先來看程式碼：
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
$("body").on("touchstart",
function(e)
{
e.preventDefault();
startX
= e.originalEvent.changedTouches[0].pageX,
startY
= e.originalEvent.changedTouches[0].pageY;
});
$("body").on("touchmove",
function(e)
{
e.preventDefault();
moveEndX
= e.originalEvent.changedTouches[0].pageX,moveEndY
= e.originalEvent.changedTouches[0].pageY,
X
= moveEndX - startX,
Y
= moveEndY - startY;
if
( X > 0 ) {
alert("left
2 right");
}
else
if
( X < 0 ) {
alert("right
2 left");
}
else
if
( Y > 0) {
alert("top
2 bottom");
}
else
if
( Y < 0 ) {
alert("bottom
2 top"
|