HTML5 Figure图片字幕标题特效

PetitQ 图片/图形 2018-11-15 1.92K 0 0

这是一款效果非常酷的 HTML5 Figure 图片字幕标题特效插件。该插件可以将任何图片元素转换为带标题的 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
```
```
 })
```
```
})
```

配置参数

参数	描述
`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	图片标题动画的持续时间，单位毫秒。