這個範例應該有很多人做過了,十分實用,如果把圖片縮小些,然後再加上燈箱的效果,應該可以拿來當展示產品或是照片等資訊,這個範例的發想是由男丁格爾的範例[jQ]用 jQuery 做廣告 – 上下垂直選項式廣告輪播來做修改的。
jQuery-Animate-API用法animate({css內容},[速度(整數)],[easing(linear/easein)],[callback])
想法,外層利用一個Div框住要製作動畫的內容,設定css的position: relative;然後內層的資料都用position: absolute;來設定left及top的pixel,如此可以把元件浮在最外層Div框的相對位置。
需要二個按鈕,浮在左邊及右邊,設定動作向左移及向右移。
畫面如下:範例網址
img元件設定title屬性的話,那文字會顯示在圖片下方一條bar上