jQuery Capty 图片标题插件

来源:互联网 发布:php csdn 编辑:程序博客网 时间:2024/06/10 00:01

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="image.jpg" alt="Super Mario Bros.®" width="342" height="262"/> 

$('#default').capty();

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

<img id="animation" src="image.jpg" alt="Super Mario Bros.®" width="342" height="262"/>

$('#animation').capty({  animation: 'fade',  speed:     400});

实例3:固定标题

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

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

<img id="content" src="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="image-1.jpg" class="fix" width="240" height="161"/><img src="image-2.jpg" class="fix" width="240" height="161"/><img src="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:       30The height of the caption.opacity:      .7The opacity of the caption.prefix:       ''The text/html that will be applied at the beginning of the legend.speed:        200The speed in which caption will appear and disappear.sufix:        ''The text/html that will be applied at the end of the caption.


原创粉丝点击