浙江 杭州

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

系统分类: 网页特效 - html5 2017-05-25

人气5712

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这是一款效果非常酷的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
图片标题动画的持续时间,单位毫秒。

查看演示
下载资源:1
下载资源
错误提交:

格式:zip 大小:109.65KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1832.html 非特殊说明,本文版权归原作者所有,转载请注明出处
7种HTML5 Figure图片字幕标题特效

我当前G币余额:0 已下载次数:1

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

说点什么...(已有3 评论)