移動端相冊

引言

這是一個利用zepto.js+animate.css+canvas簡單的移動端手機相冊。

使用Zepto.js

Zepto是一個輕量級的針對現代高級瀏覽器的JavaScript庫， 它與jquery有着相似的api。 若是你會用jquery，那麼你也會用Zepto。Zepto.js API 中文版(1.2.0) 本例子中除了Zepto的默認模塊（zepto event ajax form ie），額外用到 touch 模塊，因此須要手動創建Zepto。

手動創建方法：

1. 進入Zepto的 GitHub 網址，並 git 項目
2. 進入zepto目錄，使用 npm 命令安裝模塊 npm install
3. 自定義構建Zepto模塊 SET MODULES=zepto event ajax form ie touch
4. 執行命令 npm run-script dist，便可在dist目錄下發現 zepto.js、zepto.min.js 等文件
5. 在html文件中引入 zepto.min.js 就能夠開始使用，像jquery同樣簡單易用

使用Animate.css

一個簡單易用的CSS動畫跨瀏覽器庫。GitHub 網址 在您的網站上使用 animate.css，只要簡單地把樣式表插入到文檔中，併爲須要動畫的元素添加一個CSS類名（動畫名稱）便可。就是這樣！你就有了一個CSS動畫效果。能夠直接到這個 官方網址 查看動畫效果。

使用方法：

1. 在html中引用 animate.min.css
2. 在標籤元素添加 class 便可獲取動畫效果

使用HTML 5 canvas 標籤

使用 canvas 的 drawImage() 方法在畫布上繪製圖像（使用Canvas代替Image），觸發物理設備的GPU渲染，優化圖片的加載速度。HTML5 canvas drawImage() 參考手冊

使用方法：

var imageObj=new Image();// 建立一個Image對象
imageObj.index=i;// 設置圖片標誌
imageObj.onload=function(){// 圖片加載觸發的方法
  var cvs=$('#cvs_'+this.index)[0].getContext('2d');
  cvs.width=this.width;
  cvs.height=this.height;
  cvs.drawImage(this,0,0,this.width,this.height);// 在畫布上定位圖像，並規定圖像的寬度和高度
}
imageObj.src=imgSrc;// 加載圖片
複製代碼

效果圖

實際操做帶有動畫效果

源碼

源代碼地址 github.com/kriswuwenxi…