堆疊相簿效果，相容pc和移動端，堆疊pc

堆疊相簿效果，相容pc和移動端，堆疊pc

在手機端，堆疊效果的相簿是比較常見的一種圖片展示方式，每個人的思路可能會有一些不同，實現的方法不同。

本篇部落客要是分享下我的實現方法，歡迎大家提出建議，指出我的不足，先3Q啦~

先看一下最終的：

思路和原理分析：

1、首先是布局上的問題。預設顯示五張錯位元影像片，剩下的圖片遮擋在第五張圖片的背後。錯位使用的是css3的transform的屬性，使用rotate屬性值，對顯示的五張圖片進行不一樣的旋轉。

2、js實現上的問題。

（1）判斷移動端和pc端，對應相容使用mouse事件還是touch事件

（2）滑動的動作，添加滑動的距離判斷，在某個範圍內有效

（3）圖片切換，第一張滑走後移動到圖片隊列的最後，迴圈顯示，這個過程中，需要注意的只是index的值，以及顯示和消失的動畫

通過上面的大概分析，這個堆疊畫冊實現起來並沒有什麼痛點，容易實現。

為了以後用起來方便，結合了jq，寫成了jquery的外掛程式形式，最後使用dom綁定這個外掛程式的函數即可。

整個項目的代碼：http://pan.baidu.com/s/1bnfMhAZ

具體的代碼不貼上來了，可以把代碼下載下來後查看。代碼都是根據上面的思路去實現的。