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

当前位置:主页 > jQuery库 > 图片效果 > 7种HTML5 Figure图片字幕标题特效
7种HTML5 Figure图片字幕标题特效
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:06-28
    阅读:
简要教程

这是一款效果非常酷的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
 })
})                
              

配置参数

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