絢麗的HTML5 Figure圖片字幕標(biāo)題特效
簡(jiǎn)要教程
這是一款效果非?？岬?a>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)條來(lái)顯示多出的文字。該圖片標(biāo)題特效使用Greensock動(dòng)畫(huà)庫(kù)來(lái)制作動(dòng)畫(huà)效果。該插件可以在所有的現(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>元素來(lái)制作，也可以使用HTML5 元素來(lái)制作：
-
<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>
復(fù)制代碼CSS樣式該特效中給出了最基本的CSS樣式，你可以根據(jù)需要對(duì)figurecaptions.css文件進(jìn)行修改。初始化插件在頁(yè)面DOM元素加載完畢之后，可以通過(guò)下面的方法來(lái)初始化該圖片標(biāo)題插件。
-
$(function{
-
$('selector').addCaption({
-
//comma separated options
-
})
-
})
配置參數(shù)圖片上的標(biāo)題效果，下面是7種可用的標(biāo)題效果：
-
"default"：遮罩層從上向下滑落，標(biāo)題從左向后滑出。
-
"zoomin"：當(dāng)鼠標(biāo)滑過(guò)時(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)。
