7种HTML5 Figure图片字幕标题特效

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

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

使用方法

HTML结构

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

<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文件进行修改。

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
 })
})                
              

配置参数