这是一款效果非常酷的HTML5 Figure图片字幕标题特效jQuery插件。该插件可以将任何图片元素转换为带标题的HTML figure元素。它内置了7种不同的图片标题效果。当标题文字高于图片时，还会出现滚动条来显示多出的文字。

该图片标题特效使用Greensock动画库来制作动画效果。该插件可以在所有的现代浏览器中工作，在IE8和IE9浏览器中部分效果会被回退。它也可以在移动触摸设备中工作，如iPad，当触摸图片时标题出现，触摸其它地方时标题被隐藏。

使用方法

HTML结构

该图片标题特效可以直接使用一个元素来制作，也可以使用HTML5

元素来制作：

CSS样式

该特效中给出了最基本的CSS样式，你可以根据需要对figurecaptions.css文件进行修改。

figure, .figurefx{

position: relative;

overflow: hidden;

display: inline-block;

z-index: 2000; /* set this to highest z-index value on your page */

margin: 0;

padding: 0;

}

.figurefx img{

position: relative;

display: block;

left: 0;

top: 0;

z-index: 98;

}

.figurefx div.veils{

content: '';

width: 100%;

height: 100%;

display: block;

background: black;

position: absolute;

opacity: 0.3;

visibility: hidden;

top: 0;

left 0;

z-index: 99;

}

.figurefx figcaption{

position: absolute;

left: 0;

top: 50%; /* vertically center caption */

transform: translateY(-50%); /* vertically center caption */

width: 100%;

height: auto;

background: #000;

color: #fff;

padding: 5px 10px;

overflow: auto;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

opacity: 0;

z-index: 100;

}

.figurefx figcaption a{

text-decoration: none;

}

a#stickyhoverfixios{

position: fixed;

width: 100%;

height: 100%;

left: 0;

top: 0;

z-index: 1999; /* set this to 2nd highest z-index value on your page */

display: none;

}

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该图片标题插件。

$(function(){

$('selector').addCaption({

//comma separated options

})

})

配置参数

参数

描述

fx: 'string'

默认值"default"

图片上的标题效果，下面是7种可用的标题效果：

"default"：遮罩层从上向下滑落，标题从左向后滑出。

"zoomin"：当鼠标滑过时图片被放大。

"dualpanels"：遮罩层分别从上面和下面向中间合拢，然后标题出现。

"dualpanels2"：遮罩层分别从左边和右边向中间合拢，然后标题出现。

"pushup"：图片被轻微的向上推，图片标题从下方出现。

"flipopen"：图片翻转，标题在图片下方出现。

"flipreveal"：图片绕X轴旋转180度，然后标题出现。

caption: 'string|title'

默认值：null

"string"参数表示图片的标题，可以带HTML标签。"title"参数表示使用图片的title标签来作为图片标题。

duration: seconds

默认值：0.5

图片标题动画的持续时间，单位毫秒。