《绚丽的HTML5Figure图片字幕标题特效》由会员分享，可在线阅读，更多相关《绚丽的HTML5Figure图片字幕标题特效（2页珍藏版）》请在金锄头文库上搜索。
1、绚丽的绚丽的 HTML5HTML5 FigureFigure 图片字幕标题特图片字幕标题特 效效简要教程简要教程这是一款效果非常酷的 HTML5 Figure 图片字幕标题特效 jQuery 插件。该插件 可以将任何图片元素转换为带标题的 HTML figure 元素。它内置了 7 种不同的 图片标题效果。当标题文字高于图片时，还会出现滚动条来显示多出的文字。 该图片标题特效使用 Greensock 动画库来制作动画效果。该插件可以在所有的 现代浏览器中工作，在 IE8 和 IE9 浏览器中部分效果会被回退。它也可以在移 动触摸设备中工作，如 iPad，当触摸图片时标题出现，触摸其它地方时标题
2、被 隐藏。使用方法使用方法HTMLHTML 结构结构该图片标题特效可以直接使用一个元素来制作，也可以使用 HTML5 元素来制作：1. 2. 3. 4. An awesome picture caption! 5. 复制代码CSSCSS 样式样式该特效中给出了最基本的 CSS 样式，你可以根据需要对 figurecaptions.css 文件进行修改。初始化插件初始化插件在页面 DOM 元素加载完毕之后， 可以通过下面的方法来初始化该图片标题插件。1. $(function 2. $(selector).addCaption( 3. /comma separated options 4. )
3、5. )配置参数配置参数图片上的标题效果，下面是 7 种可用的标题效果：“default“：遮罩层从上向下滑落，标题从左向后滑出。“zoomin“：当鼠标滑过时图片被放大。“dualpanels“：遮罩层分别从上面和下面向中间合拢，然后标题出现。“dualpanels2“：遮罩层分别从左边和右边向中间合拢，然后标题出现。“pushup“：图片被轻微的向上推，图片标题从下方出现。“flipopen“：图片翻转，标题在图片下方出现。“flipreveal“：图片绕 X 轴旋转 180 度，然后标题出现。【编辑推荐】1. 2015 年 16 个最佳的免费响应式 HTML5 框架 2. HTML5 的你应该记住的一些知识点 3. 让 Web App 更快的 HTML5 最佳实践 4. HTML5 将掀起品牌互联网移动营销潮流 5. 五个国外优秀的 HTML5 酷站欣赏 6. Top 10：HTML5、JavaScript 3D 游戏引擎和框架
