[jQuery弹出层插件推荐ColorBox使用攻略_百度经验]

百度经验:jingyan.baidu.com

jQuery Colorbox是一款非常好的内容播放插件。它集弹出层、幻灯片播放功能于一身，不仅于此，它还支持其它的内容格式：例如html, flash, iframe等，这些内容的显示方式都是Ajax的。更难能可贵的是，在压缩后它只有10K的大小，使用这款插件不会给你的网页带来过多的负担，而且还能实现很棒的视觉效果，为用户体验增色不少。

易于使用也是Colorbox的众多优点之一，它的代码调用非常之简洁。

本经验分享如何使用 jQuery Colorbox插件。

jquery.ColorBox确实是一个非常强大的jquery弹出层插件，仔细把ColorBox研究研究其他弹出层都不需要用了

百度经验:jingyan.baidu.com

[](javascript:;)工具/原料

笔记本电脑或是台式机
互联网
jQuery
jQuery Colorbox插件

百度经验:jingyan.baidu.com

[](javascript:;)方法/步骤

1
在GitHub上下载最新版的jQuery Colorbox插件，如下图所示：
步骤阅读
2
引入jquery和colorbox的js文件
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";></script>
<script src="colorbox/jquery.colorbox.js"></script>
3
引入colorbox的css文件
<link media="screen" rel="stylesheet" href="colorbox\colorbox.css" />
4
html代码如下：
<body>
<h1>ColorBox演示</h1>
<h2>弹性效果</h2>
<p>Grouped Photo 1</p>
<p>Grouped Photo 2</p>
<p>Grouped Photo 3</p>
</body>
步骤阅读
5
调用colorbox的代码
<script>
$(document).ready(function(){
//元素调用Colorbox的示例
$(".group1").colorbox({ rel: 'group1' });
});
</script>
步骤阅读
6
以上是如何使用的每一个步骤，这里是对上面4个步骤的整合后的完整示例。
最简单示例的完整代码，如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ColorBox 示例</title>
<link rel="stylesheet" href="colorbox/colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";></script>
<script src="colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
//元素调用Colorbox的示例
$(".group1").colorbox({ rel: 'group1' });
});
</script>
</head>
<body>
<h1>ColorBox演示</h1>
<h2>弹性效果</h2>
<p>Grouped Photo 1</p>
<p>Grouped Photo 2</p>
<p>Grouped Photo 3</p>
</body>
</html>
步骤阅读
7
案例运行效果如下图所示:
步骤阅读
END