本人接觸前端不久，寫的不好的請多多指教，歡迎指出
最近做到一個需求需要實現移動端的手勢操作，在網上有找到不少不錯的插件（PS：就不打廣告了，一搜一大堆）
插件用起來確實不錯，不過自己想研究下，便寫了一個demo，實現了上拉、下拉觸發，及左右手勢滑動觸發
上拉、下拉觸發用了
$(window).scroll（） //當滾動條滾動時觸發
scrollTop（）（滾動條距離頂部的高度）
$(document).height(當前頁面的總高度)
$(this).height(當前可視的頁面高度);
具體請看下面附上代碼
左右手勢滑動觸發
使用了js的addEventListener監聽，
分別監聽-touchstart事件，touchmove事件，touchend事件，主要獲取clientX，clientY屬性
touchstart：當鼠標點擊屏幕時觸發
touchmove：當鼠標在屏幕移動時觸發
touchend：當鼠標離開屏幕時觸發
屬性：event.touches[0].clientX，event.touches[0].clientY獲取x，y坐標
直接上代碼，請多指教（PS：請使用移動模式調試）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>下拉刷新，滾動翻頁</title>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<style>
li{border:1px solid #dfdfdf;height:50px;position:relative;width:140%}
li div{width:30%;height:30px;float:right}
</style>
</head>
<body>
<div style="height:1000px;overflow-x:hidden;">
<p class="sdf">x:,y:</p>
<p class="sf">x:,y:</p>
<div class="2">
<li id="1"><div style="background-color:red;"></div></li>
<li id="2"><div style="background-color:blue;"></div></li>
<li id="3"><div style="background-color:green;"></div></li>
<li id="4"><div style="background-color:black;"></div></li>
<li id="5"><div style="background-color:gray;"></div></li>
</div>
</div>
<script>
$(document).ready(function(){
$(window).scroll(function(){
var scrollTop = $(this).scrollTop(); //滾動條距離頂部的高度
var scrollHeight = $(document).height(); //當前頁面的總高度
var windowHeight = $(this).height(); //當前可視的頁面高度
if(scrollTop + windowHeight >= scrollHeight){ //距離頂部+當前高度 >=文檔總高度 即代表滑動到底部
alert("上拉加載，要在這調用啥方法？");
}else if(scrollTop<=0){ //滾動條距離頂部的高度小於等於0
alert("下拉刷新，要在這調用啥方法？");
}
});
var obj;
var startx;
var starty;
var overx;
var overy;
for(var i=1;i<=$("li").length;i++){ //為每個li標簽添加事件
obj = document.getElementById(i); //獲取this元素
evenlistener(obj); //調用evenlistener函數並將dom元素傳入，為該元素綁定事件
}
function evenlistener(obj){
obj.addEventListener('touchstart', function(event) { //touchstart事件,當鼠標點擊屏幕時觸發
startx = event.touches[0].clientX; //獲取當前點擊位置x坐標
starty = event.touches[0].clientY; //獲取當前點擊位置y坐標
$(".sdf").text("x:"+startx+",y:"+starty+"") //賦值到頁面顯示
} , false); //false參數,設置事件處理機制的優先順序，具體不多說，true優先false
obj.addEventListener('touchmove', function(event) { //touchmove事件,當鼠標在屏幕移動時觸發
overx = event.touches[0].clientX; //獲取當前點擊位置x坐標
overy = event.touches[0].clientY; //獲取當前點擊位置y坐標
var $this = $(this); //將dom對象轉化為jq對象，由於項目用到jquery，直接使用其animate方法
if(startx-overx>10){ //左滑動判斷，當左滑動的距離大於開始的距離10進入
$($this).animate({marginLeft:"-55px"},150); //實現左滑動效果
}else if(overx-startx>10){ //右滑動判斷，當右滑動的距離大於開始的距離10進入
$($this).animate({marginLeft:"0px"},150); //恢復
}
} , false);
obj.addEventListener('touchend', function(event) { //touchend事件,當鼠標離開屏幕時觸發，項目中無用到，舉例
$(".sf").text("x:"+overx+",y:"+overy+"")
} , false);
}
});
</script>
</body>
</html>
博客：http://www.cnblogs.com/alex-web/
注：小瘋紙的yy