簡要教程

這是一款效果非常酷的HTML5 Figure圖片字幕標(biāo)題特效jQuery插件。該插件可以將任何圖片元素轉(zhuǎn)換為帶標(biāo)題的HTML figure元素。它內(nèi)置了7種不同的圖片標(biāo)題效果。當(dāng)標(biāo)題文字高于圖片時(shí)，還會(huì)出現(xiàn)滾動(dòng)條來顯示多出的文字。該圖片標(biāo)題特效使用Greensock動(dòng)畫庫來制作動(dòng)畫效果。該插件可以在所有的現(xiàn)代瀏覽器中工作，在IE8和IE9瀏覽器中部分效果會(huì)被回退。它也可以在移動(dòng)觸摸設(shè)備中工作，如iPad，當(dāng)觸摸圖片時(shí)標(biāo)題出現(xiàn)，觸摸其它地方時(shí)標(biāo)題被隱藏。

使用方法

HTML結(jié)構(gòu)該圖片標(biāo)題特效可以直接使用一個(gè)<img>元素來制作，也可以使用HTML5 元素來制作：

1. <img id="eg1" src="img/sunbreakthrough.jpg" title="An awesome picture caption!" />

2. <figure id="eg6">

3. <img src="img/sunbreakthrough.jpg" alt="An awesome picture">

4. <figcaption>An awesome picture caption!</figcaption>

5. </figure>

復(fù)制代碼CSS樣式該特效中給出了最基本的CSS樣式，你可以根據(jù)需要對(duì)figurecaptions.css文件進(jìn)行修改。初始化插件在頁面DOM元素加載完畢之后，可以通過下面的方法來初始化該圖片標(biāo)題插件。

1. $(function{

2. $('selector').addCaption({

3. //comma separated options

4. })

5. })

配置參數(shù)圖片上的標(biāo)題效果，下面是7種可用的標(biāo)題效果：

• "default"：遮罩層從上向下滑落，標(biāo)題從左向后滑出。

• "zoomin"：當(dāng)鼠標(biāo)滑過時(shí)圖片被放大。

• "dualpanels"：遮罩層分別從上面和下面向中間合攏，然后標(biāo)題出現(xiàn)。

• "dualpanels2"：遮罩層分別從左邊和右邊向中間合攏，然后標(biāo)題出現(xiàn)。

• "pushup"：圖片被輕微的向上推，圖片標(biāo)題從下方出現(xiàn)。

• "flipopen"：圖片翻轉(zhuǎn)，標(biāo)題在圖片下方出現(xiàn)。

• "flipreveal"：圖片繞X軸旋轉(zhuǎn)180度，然后標(biāo)題出現(xiàn)。