絢麗的HTML5 Figure圖片字幕標題特效
簡要教程
這是一款效果非常酷的HTML5 Figure圖片字幕標題特效jQuery插件。該插件可以將任何圖片元素轉換為帶標題的HTML figure元素。它內置了7種不同的圖片標題效果。當標題文字高于圖片時，還會出現滾動條來顯示多出的文字。該圖片標題特效使用Greensock動畫庫來制作動畫效果。該插件可以在所有的現代瀏覽器中工作，在IE8和IE9瀏覽器中部分效果會被回退。它也可以在移動觸摸設備中工作，如iPad，當觸摸圖片時標題出現，觸摸其它地方時標題被隱藏。
使用方法
HTML結構該圖片標題特效可以直接使用一個<img>元素來制作，也可以使用HTML5 元素來制作：
-
<img id="eg1" src="img/sunbreakthrough.jpg" title="An awesome picture caption!" />
-
<figure id="eg6">
-
<img src="img/sunbreakthrough.jpg" alt="An awesome picture">
-
<figcaption>An awesome picture caption!</figcaption>
-
</figure>
復制代碼CSS樣式該特效中給出了最基本的CSS樣式，你可以根據需要對figurecaptions.css文件進行修改。初始化插件在頁面DOM元素加載完畢之后，可以通過下面的方法來初始化該圖片標題插件。
-
$(function{
-
$('selector').addCaption({
-
//comma separated options
-
})
-
})
配置參數圖片上的標題效果，下面是7種可用的標題效果：
-
"default"：遮罩層從上向下滑落，標題從左向后滑出。
-
"zoomin"：當鼠標滑過時圖片被放大。
-
"dualpanels"：遮罩層分別從上面和下面向中間合攏，然后標題出現。
-
"dualpanels2"：遮罩層分別從左邊和右邊向中間合攏，然后標題出現。
-
"pushup"：圖片被輕微的向上推，圖片標題從下方出現。
-
"flipopen"：圖片翻轉，標題在圖片下方出現。
-
"flipreveal"：圖片繞X軸旋轉180度，然后標題出現。
