这是一款效果非常酷的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种可用的标题效果:
|
caption: 'string|title' 默认值:null |
"string"参数表示图片的标题,可以带HTML标签。"title"参数表示使用图片的title 标签来作为图片标题。 |
duration: seconds 默认值:0.5 |
图片标题动画的持续时间,单位毫秒。 |