iScroll API 中文版
介紹
iScroll是一個高性能，資源佔用少，無依賴，多平臺的javascript滾動插件。
它可以在桌面，移動設備和智能電視平臺上工作。它一直在大力優化性能和文件大小以便在新舊設備上提供最順暢的體驗。
iScroll不僅僅是 滾動。它可以處理任何需要與用戶進行移動交互的元素。在你的項目中包含僅僅4kb大小的iScroll，你的項目便擁有了滾動，縮放，平移，無限滾動，視差滾動，旋轉功能。給它一個掃帚它甚至能幫你打掃辦公室。
即使平臺本身提供的滾動已經很不錯，iScroll可以在此基礎上提供更多不可思議的功能。具體來說：
-
細粒度控制滾動位置，甚至在滾動過程中。你總是可以獲取和設置滾動器的x，y座標。
-
動畫可以使用用戶自定義的擦出功能（反彈'bounce'，彈性'elastic'，回退'back'，...）。
-
開箱即用的多平臺支持。從很老的安卓設備到最新的iPhone，從Chrome瀏覽器到IE瀏覽器。
快速入門
最好的學習iScroll的方法是看示例。在存檔文件中你會發現一個叫做
demo的文件夾示例。這裏有大多數腳本功能的概述。
IScroll是一個類，每個需要使用滾動功能的區域均要進行初始化。每個頁面上的iScroll實例數目在設備的CPU和內存能承受的範圍內是沒有限制的。
儘可能保持DOM結構的簡潔,最佳的HTML結構如下：
<div id="wrapper">
<ul>
<li>...</li>
<li>...</li>
...
</ul>
</div>
iScroll作用於滾動區域的外層。在上面的例子中，UL元素能進行滾動。只有容器元素的第一個子元素能進行滾動，其他子元素完全被忽略。
最基本的腳本初始化的方式如下：
<script type="text/javascript">
var myScroll = new IScroll('#wrapper');
</script>
第一個參數可以是滾動容器元素的DOM選擇器字符串，也可以是滾動容器元素的引用對象。下面是一個有效的語法：
var wrapper = document.getElementById('wrapper');
var myScroll = new IScroll(wrapper);
所以基本上你要麼直接傳遞元素，要麼傳遞一個
querySelector字符串。因此可以使用css名稱代替ID去選擇一個滾動器容器,如下:
var myScroll = new IScroll('.wrapper');
注意 ：iScroll使用的是querySelector 而不是 querySelectorAll，所以iScroll只會作用到選擇器選中元素的第一個。如果你需要對多個對象使用iScroll，你需要構建自己的循環機制。
注意 ：當DOM準備完成後iScroll需要被初始化。最保險的方式是在window的onload事件中啓動它。腳本需要知道滾動區域的高度和寬度。如果你有一些圖片在滾動區域導致不能立馬獲取區域的高度和寬度，iScroll的滾動尺寸有可能會錯誤。
Animate.css動畫庫
Animate.css是一個有趣的，跨瀏覽器的css3動畫庫。很值得我們在項目中引用。
1、首先引入animate css文件
<head>
<link rel="stylesheet" href="animate.min.css">
</head>
2、給指定的元素加上指定的動畫樣式名
這裏包括兩個class名，第一個是基本的，必須添加的樣式名，任何想實現的元素都得添加這個。第二個是指定的動畫樣式名。
<div class="animated bounceOutLeft"></div>
3、如果說想給某個元素動態添加動畫樣式，可以通過jquery來實現：
$('#yourElement').addClass('animated bounceOutLeft');
4、當動畫效果執行完成後還可以通過以下代碼添加事件
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
你也可以通過 JavaScript 或 jQuery 給元素添加這些 class，比如：
$(function(){
$('#jq22').addClass('animated bounce');
});
有些動畫效果最後會讓元素不可見，比如淡出、向左滑動等等，可能你又需要將 class 刪除，比如：
$(function(){
$('#jq22').addClass('animated bounce');
setTimeout(function(){
$('#jq22').removeClass('bounce');
}, 1000);
});
animate.css 的默認設置也許有些時候並不是我們想要的，所以你可以重新設置，比如：
#jq22{
animate-duration: 2s; //動畫持續時間
animate-delay: 1s; //動畫延遲時間
animate-iteration-count: 2; //動畫執行次數
}
所有的動畫樣式名請參見demo頁面。
關於tap事件與click事件
-
click事件在pc端非常用，但是在移動端會有300ms左右的延遲，比較影響用戶的體驗，300ms用於判斷雙擊還是長按事件，只有當沒有後續的的動作發生時，纔會觸發click事件
-
tap事件只要輕觸了，就會觸發，體驗更好。
/*
* 由於移動端的點擊事件click 有300左右的延遲， 用戶體驗有待提升
* 希望 能用touch事件封裝一個相應速度更快的 點擊事件 tap
*
* touch判斷爲點擊事件的條件：
*
* 1、觸屏開始 到觸屏結束 手指沒有移動
* 2、接觸屏幕的時間 小於指定的值 150ms *
*
* 滿足以上兩個條件 可以認爲是點擊事件觸發了
* */
/*
* 插件功能：
* 給指定的元素 綁定優化後的移動的點擊事件--- tap事件
* 參數：
* obj:要綁定優化後點擊事件的元素
* callback: 當點擊事件觸發 執行什麼操作
* */
var itcast={
tap:function(obj,callback){
if(typeof obj=='object'){ //判斷傳入的obj是否爲對象
var startTime=0;//記錄起始事件
var isMove=false; //記錄是否移動
obj.addEventListener('touchstart',function(){
startTime=Date.now(); //獲取當前時間戳
});
obj.addEventListener('touchmove',function(){
isMove=true; //記錄移動
});
obj.addEventListener('touchend',function(e){
//判斷是否滿足點擊的條件
if(!isMove&&Date.now()-startTime<150){
//tap點擊事件觸發
//if(callback){
// callback();
//}
callback&&callback(e);
}
//數據重置
isMove=false;
startTime=0;
});
}
}
}