jQuery Capty是可以为图片添加漂亮的字幕的插件

文件包含:

<link type="text/css" rel="stylesheet" href="/capty/css/jquery.capty.css"/>
<script type="text/javascript" src="/capty/js/jquery.js"></script>
<script type="text/javascript" src="/capty/js/jquery.capty.min.js"></script>

调用方法:

实例1:图片的alt标签默认被应用于标题内容

<img id="default" src="data:image.jpg" alt="Super Mario Bros.®" width="342" height="262"/> 
$('#default').capty();

实例2:自定义动画和速度

<img id="animation" src="data:image.jpg" alt="Super Mario Bros.®" width="342" height="262"/>
$('#animation').capty({
animation: 'fade',
speed: 400
});

实例3:固定标题

<img id="fixed" src="data:image.jpg" alt="Super Mario Bros.®" width="342" height="262"/>
$('#fixed').capty({
animation: 'fixed'
});

实例4:自定义标题与外部扩展内容

<img id="content" src="data:image.jpg" name="#content-target" width="342" height="262"/>

<div id="content-target">
<span style="color: #F00;">Mario</span> - Super Mario Bros.®<br/>
<a href="javascript:void(0);">http://www.mariobros.com</a>
</div>
$('#content').capty({
height: 46,
opacity: .6
});

实例5:用后缀,前缀和一个自定义的风格应用于一组元素

<img src="data:image-1.jpg" class="fix" width="240" height="161"/>
<img src="data:image-2.jpg" class="fix" width="240" height="161"/>
<img src="data:image-3.jpg" class="fix" width="240" height="161"/>
$('.fix').capty({
cWrapper: 'capty-tile',
prefix: '<span style="color: #35BB87">Luigui</span>',
sufix: 'Super Mario Bros.®'
});

默认设置选项

animation:    'slide'
The captions animation type: 'slide', 'fade' or 'fixed'.
cCaption: 'capty-caption'
The class name of the wrapper caption.
cImage: 'capty-image'
The class name of the wrapper image.
cWrapper: 'capty-wrapper'
The class name of the wrapper image and caption.
height: 30
The height of the caption.
opacity: .7
The opacity of the caption.
prefix: ''
The text/html that will be applied at the beginning of the legend.
speed: 200
The speed in which caption will appear and disappear.
sufix: ''
The text/html that will be applied at the end of the caption.

jQuery Capty 图片标题插件的更多相关文章

  1. 推荐几款jquery图片切换插件

    一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...

  2. 提升用户体验的最佳免费 jQuery 表单插件

    网页表单是一个老生常谈的话题.出于这样或那样的目的,一些示例中都会包括用户注册,电子商务结算,用户设置甚至联系人表格.而输入栏是非常容易用现代的CSS3技术来应用样式.但是到底什么决定整体用户体验? ...

  3. jQuery为开发插件提拱了两个方法:jQuery.fn.extend(); jQuery.extend();

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...

  4. jQuery 人脸识别插件,支持图片和视频

    jQuery Face Detection 是一款人脸检测插件,能够检测到图片,视频和画布中的人脸坐标.它跟踪人脸并输出人脸模型的坐标位置为一个数组.我们相信,面部识别技术能够给我们的 Web 应用带 ...

  5. myWaterfall - jQuery瀑布流布局插件

    myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...

  6. 推荐15款最佳的 jQuery 分步引导插件

    当用户浏览到一个网站,它可能从不知道如何浏览,如何操作网站或 Web 应用程序的内容和流程.在这篇文章中,我们编制了一些最好的 jQuery 引导插件列表.你会发现这些插件对于提高你的网站的整体用户体 ...

  7. Cropper – 简单的 jQuery 图片裁剪插件

    Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...

  8. 一款简洁大气的jquery日期日历插件

    本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js 查看效果网址:http://keleyi.com/a/bjad/em ...

  9. 使用requireJS的shim参数 解决插件 jquery.ui 等插件问题

    没有requireJS框架之前,如果我们想使用jquery框架,会在HTML页面中通过<script>标签加载, 这个时候jquery框架生成全局变量$和jQuery等全局变量.如果项目中 ...

随机推荐

  1. Encoding 类别

    Encoding 類別 .NET Framework 4.5   表示字元編碼方式. 繼承階層架構 System.Object   System.Text.Encoding    System.Tex ...

  2. LightOJ_1038 Race to 1 Again

    题目链接 题意: 给一个数n, 每次操作是随机的选择一个[1,N]区间内能够被n整除的数进行除法, 然后得到一个新的n. 问n变成1时的期望操作次数. 思路: 设E[n] 为 当数为x时, 变成 1 ...

  3. IOSアプリケーション開発環境の構築

    IOSアプリケーション開発環境の要求 1) IOSシステムの構造はそのようになっています: 2) ハードウエアの方の要求: コンピューター a)    デュアルコアCPU b)    8 gメモリ(開 ...

  4. [BZOJ 1106] [POI2007] 立方体大作战tet 【树状数组】

    题目链接:BZOJ - 1106 题目分析 从1到2n枚举每一个位置. 如果枚举到某一个数,这个数已经是第二次出现,那么就看它和第一次出现的位置之间有多少数还没有被匹配,有多少没有匹配的就要进行多少次 ...

  5. onchange事件

    一.onchange 一般input type text的onchange事件的触发需要两个条件:1.输入框的值发生了改变:2.该文本框失去了焦点,而真正的事件的触发却是发生在该文本框失去焦点的时候, ...

  6. Delphi 在任务栏隐藏程序图标

    Delphi 在任务栏隐藏程序图标 方法一:1.修改工程文件中的“Application.MainFormOnTaskbar := True;”为“Application.MainFormOnTask ...

  7. Delphi实现HTMLWebBrowser实现HTML界面

    HTML的界面有以下特点:图文混排,格式灵活,可以包含Flash.声音和视频等,实现图文声像的多媒体界面,而且易于建立和维护.另外,HTML的显示环境一般机器上都具备,通常不需要安装额外的软件.当然, ...

  8. (转载)浅谈javascript的分号

    (转载)http://www.blueidea.com/tech/web/2009/7261.asp javascript的分号代表语句的结束符,但由于javascript具有分号自动插入规则,所以它 ...

  9. BCTF赛后

    今天早上八点,BTCF第一届落幕.虽然没有熬夜coding但还是十分开心. 从收到超哥的邀请,到回头组队,一开始的十几人,最后演化为五人的精简小分队,到昨晚把所有有想法的题目全部搞定,十分的开心和欣慰 ...

  10. Google辅助类软件

    本博文的主要内容有 .Google辅助类软件的介绍 .重点首推!  Google软件精选管理器 1.Google辅助类软件的介绍 1.  Google软件精选管理器的下载和安装使用 2.  Googl ...