[jQuery]照片展示animate左右及上下移動

在前一篇[jQuery]利用animate來製作左右移動圖片展示器有利用jQuery來製作Animate效果,來製作左右移動圖片的照片或產品展示器,不過就只能針對同種分類或同性資的照片來做效果,如果有多種分類照片或產品就需要再做一份一樣的內容,這裡提供一個解決的方案,再做一次Animate,不過這次是上下移動來選擇不同列的圖片(照片)資料。

不同分類的圖片,利用不同的ul來分開,然後在ul的前面再加上一個Div來做上下移動的框架,左右移動則是利用ul這個tag,當移動到那一列的框架,把index記錄起來,如此左移及右移按鈕才可針對目前列來做移動。

ul及img都有title這個屬性,所以利用此屬性來當上方分類名稱。

效果截圖如下:

jQueryAnimate3.png




按下左移或右移按鈕,可以使圖片向左或向右移動。

jQueryAnimate4.png

按下上方分頁按鈕,則會上或下移動到該列(分類)。

jQueryAnimate5.png

此時按左移或右移,只會針對此列(分類)來做圖片(照片)的移動。

jQueryAnimate6.png

CSS增加的部份如下:

而javascript部份增加了上下移動id=topPlayer這個動作

比較特別的是,這個範例只能把不同列的內容照片數量放一樣的,因為左右移動用的框被設定了overflow:hidden及width寬,如果某列(分類)的內容照片數量與其它列(分類)不一樣時,會出現跑出空白的問題,這其實應該不難解決,就留給有心的朋友吧!。

Html的部份改成如下:

範例網址

發表迴響