jQuery Colorbox使用教程
2024-08-25 09:14:27
jQuery Colorbox是一款弹出层,内容播放插件,效果极佳,最关键的是大小只有10KB,当然我主要是用来弹出图片啦,(之前介绍过jquery Fancybox插件,个人很喜欢)。jQuery Colorbox不仅有弹性动画效果,淡入淡出效果,幻灯片播放,宽度自定义,还能够ajax加载html,iframe等等,最主要的是它还可以写回调函数。废话少说,请看5种演示效果:
http://www.phpddt.com/demo/colorbox/example1/
http://www.phpddt.com/demo/colorbox/example2/
http://www.phpddt.com/demo/colorbox/example3/
http://www.phpddt.com/demo/colorbox/example4/
http://www.phpddt.com/demo/colorbox/example5/
使用当然非常简单:
首先引入jquery,colorbox插件,colorbox的css
<script type="text/javascript" src="http://www.phpddt.com/usr/themes/dddefault/jquery-1.4.2.min.js"></script>
<script src="http://www.phpddt.com/demo/colorbox/colorbox/jquery.colorbox.js"></script>
<link media="screen" rel="stylesheet" href="http://www.phpddt.com/demo/colorbox/colorbox/colorbox.css" />
然后看html代码
<p><a class="group1" data-rel='hi' href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">第一组图片演示</a></p>
<p><a class="group1" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">第一组图片演示</a></p>
<p><a class="group1" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">第一组图片演示</a></p>
调用colorbox代码:
<script>
$(document).ready(function(){
$(".group1").colorbox({ rel: 'group1' });
});
</script>
当然更多教程请移步官网:http://www.jacklmoore.com/colorbox/
附上jquery colorbox设置翻译:
最新文章
- rdlc报表相关
- 从零开始学习Linux(mkdir and rmdir)
- 八幅漫画理解使用JSON Web Token设计单点登录系统
- IOS多线程(NSOperation,NSOperationQueue)
- 详解for循环(各种用法)
- VS产生sdf和ipch文件太大处理方案
- CSQuery 简单测试
- Ehcache详细解读(转载)
- Android问题-selection contains a component,button7,introduced in an ancestor and cannot be deleted.
- SDL_Test库(1)——SDL不用TTF库绘制文字
- Python数据结构-字典
- JavaScript阻止事件冒泡(兼容IE、Chrome、FF)
- STM32的优先级NVIC_PriorityGroupConfig
- Flash真的老了,HTML5将取代其地位
- Spring怎么引入多个xml配置文件
- Windows下Nginx实现负载均衡
- foreach 中获取索引index的方法
- Huginn及环境搭建
- RxJava2-后台执行耗时操作,实时通知 UI 更新(一)
- maven 仓库配置 pom中repositories属性