建站
咨詢
售后
建站咨詢
新聞中心
簡要教程
這是一款效果非?？岬腍TML5 Figure圖片字幕標(biāo)題特效jQuery插件。該插件可以將任何圖片元素轉(zhuǎn)換為帶標(biāo)題的HTML figure元素。它內(nèi)置了7種不同的圖片標(biāo)題效果。當(dāng)標(biāo)題文字高于圖片時(shí)，還會出現(xiàn)滾動條來顯示多出的文字。該圖片標(biāo)題特效使用Greensock動畫庫來制作動畫效果。該插件可以在所有的現(xiàn)代瀏覽器中工作，在IE8和IE9瀏覽器中部分效果會被回退。它也可以在移動觸摸設(shè)備中工作，如iPad，當(dāng)觸摸圖片時(shí)標(biāo)題出現(xiàn)，觸摸其它地方時(shí)標(biāo)題被隱藏。
使用方法
HTML結(jié)構(gòu)該圖片標(biāo)題特效可以直接使用一個(gè)元素來制作，也可以使用HTML5 元素來制作：
-
-
-
-
An awesome picture caption!
復(fù)制代碼CSS樣式該特效中給出了最基本的CSS樣式，你可以根據(jù)需要對figurecaptions.css文件進(jìn)行修改。初始化插件在頁面DOM元素加載完畢之后，可以通過下面的方法來初始化該圖片標(biāo)題插件。
-
$(function{
-
$('selector').addCaption({
-
//comma separated options
-
})
-
})
配置參數(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)。
網(wǎng)頁名稱：絢麗的HTML5Figure圖片字幕標(biāo)題特效
網(wǎng)站地址：http://www.5511xx.com/article/ccoossp.html
