图片/图形
CaptionerJs 图片标题动画效果jQuery插件
PetitQ
CaptionerJs 是一款简单实用的 jQuery 图片标题动画效果插件。网上有许多图片标题插件，但是 CaptionerJs 可以为你创建干净整洁并且带有语义的图片标题 HTML 代码。CaptionerJs 不使用 div 作为图片层，而是使用 figure 和 figcaption 元素来转换图片，使图片和图片标题有明确的语义。你可以在书写图片代码的时候使用标准的 HTML 图片代码，CaptionerJs 会使用 title 和 alt 属性来制作图片的标题。
使用方法
使用这个图片标题插件要先引入 jQuery 和 CaptionerJs.js 文件。
也想出现在这里？联系我们吧
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/CaptionerJs.js"></script>
图片的 HTML 代码可按下面格式来书写。
<imgsrc="./images/chicory.jpg"
role="caption"
title="Chicory flower"
alt="Common chicory, Cichorium intybus, is a somewhat woody, perennial herbaceous plant usually with bright blue flowers, rarely white or pink."
/>
CaptionerJs 会将所有带有 role="caption"属性的图片进行转换。
配置参数
该图片标题插件可以通过 HTML 标签属性来配置参数。
data-captioner-type：图片标题显示的类型，默认值为：static
data-captioner-class：容器上的 CLASS 名称，默认值为：CaptionerJs
data-captioner-start-closed：当显示和动画图片标题时是打开还是关闭。默认值为：false
也可以通过 js 来配置参数：
$("img").CaptionerJs({
type: "...",
cls : "...",
options: {
startClosed: ...}});
注意，如果使用 javascript 来设置该插件的参数，不要在图片元素中设置 role="caption"。
可用的图片标题类型有：
static：图片标题在图片的底部
animated：图片标题在图片的底部，但是图片标题可以有打开和关闭动画效果
classic：图片标题显示在图片的下面
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
