jQuery Capty 图片标题插件
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 图片标题插件的更多相关文章
- 推荐几款jquery图片切换插件
一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...
- 提升用户体验的最佳免费 jQuery 表单插件
网页表单是一个老生常谈的话题.出于这样或那样的目的,一些示例中都会包括用户注册,电子商务结算,用户设置甚至联系人表格.而输入栏是非常容易用现代的CSS3技术来应用样式.但是到底什么决定整体用户体验? ...
- jQuery为开发插件提拱了两个方法:jQuery.fn.extend(); jQuery.extend();
jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...
- jQuery 人脸识别插件,支持图片和视频
jQuery Face Detection 是一款人脸检测插件,能够检测到图片,视频和画布中的人脸坐标.它跟踪人脸并输出人脸模型的坐标位置为一个数组.我们相信,面部识别技术能够给我们的 Web 应用带 ...
- myWaterfall - jQuery瀑布流布局插件
myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...
- 推荐15款最佳的 jQuery 分步引导插件
当用户浏览到一个网站,它可能从不知道如何浏览,如何操作网站或 Web 应用程序的内容和流程.在这篇文章中,我们编制了一些最好的 jQuery 引导插件列表.你会发现这些插件对于提高你的网站的整体用户体 ...
- Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...
- 一款简洁大气的jquery日期日历插件
本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js 查看效果网址:http://keleyi.com/a/bjad/em ...
- 使用requireJS的shim参数 解决插件 jquery.ui 等插件问题
没有requireJS框架之前,如果我们想使用jquery框架,会在HTML页面中通过<script>标签加载, 这个时候jquery框架生成全局变量$和jQuery等全局变量.如果项目中 ...
随机推荐
- spm使用之三spm应用实例
spm 的init实际上是调用了grunt这个工具来实现一些交互式的提问和数据的获取. 看看npm就知道, npm有个命令叫init, 就是一样的交互式提问获取你要创建的nodejs的模块信息. sp ...
- bzoj 1014: [JSOI2008]火星人prefix hash && splay
1014: [JSOI2008]火星人prefix Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 3154 Solved: 948[Submit][ ...
- Java日志性能
在任何系统中,日志都是非常重要的组成部分,它是反映系统运行情况的重要依据,也是排查问题时的必要线索.绝大多数人都认可日志的重要性,但是又有多少人仔细想过该怎么打日志,日志对性能的影响究竟有多大呢?今天 ...
- Warm up 2
hdu4619:http://acm.hdu.edu.cn/showproblem.php?pid=4619 题意:题目大意:给你两种纸牌 ,一种水平放置共有n张 ,一种竖直放置共有m张.水平放置的纸 ...
- jsp分页技术
1.以下为分页类: import java.io.Serializable; import java.util.List; import org.apache.commons.lang.bui ...
- 接收对 http://192.168.1.18:8001/ObtainData/Service 的 HTTP 响应时发生错误。这可能是由于服务终结点绑定未使用 HTTP 协议造成的。这还可能是由于服务器中止了 HTTP 请求上下文(可能由于服务关闭)所致。
[2015/8/5 19:28:49]错误信息:接收对 http://192.168.1.18:8001/ObtainData/Service 的 HTTP 响应时发生错误.这可能是由于服务终结点绑定 ...
- HDU-2509 Be the Winner
http://acm.hdu.edu.cn/showproblem.php?pid=2509 Be the Winner Time Limit: 2000/1000 MS (Java/Others) ...
- Atmospheric Scattering in Unity5
本次实践效果仅有Atmospheric Scattering和AA,并无其他post-processing,看到类似depth of field等的效果全部是Atmospheric Scatterin ...
- js 中 json对象 与 json字符串 间相互转换
在数据传输过程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键 JSON字符串: var str1 = '{ " ...
- 使用AppDelegate单例,解决子视图无法给父视图发送消息的问题
关于单例模式,我会在实验过后再开一个博客重点讲单例的使用,这里只是介绍我在PhotoForBingyan的照片滤镜的项目中使用AppDelegate单例的情况. 碰到的问题: 由于这个项目是个多视图的 ...