[jQuery]圖片(相片)透明度Show幻燈片效果

這一個效果很像是flash做出來的,可以用在形象產品或圖片上,當滑鼠滑入圖片時會慢慢變清楚,而滑鼠移開後,又會自動淡出到原本的透明度,當點擊照片時,又利用ThickBox(Lightbox)來顯示大張的圖片。

用到的jQuery效果有hover(滑入function,滑出function),fadeTo(速度,透明度[0-1])

樣式如下:

圖片一開始會被亂數速度變透明,如果不想要此效果,只要把速度調整一下,或是直接css設定透明度都可以。

jQueryAnimate8.jpg

按下圖片可以啟動遮照,然後大相片(照片)被顯示出來了。

jQueryAnimate7.jpg

CSS

HTML

JavaScript(jQuery)

thickbox需要載入它的js及css,可以到其官網去下載

範例網址

發表迴響