爱站程序员基地本示例使用Jquery的ColorBox插件弹出图片组浏览层。效果预览网址：http://keleyi.com/keleyi/phtml/colorbox/
以下是本效果的完整代码，将以下代码保存到html文件，打开即可预览效果。
<!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>
<title>使用ColorBox弹出图片组浏览层</title>
<link rel=\”stylesheet\” href=\”http://keleyi.com/keleyi/phtml/colorbox/colorbox.css\” />
<script type=\”text/javascript\” src=\”http://keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js\”></script>
<script type=\”text/javascript\” src=\”http://keleyi.com/keleyi/phtml/colorbox/jquery.colorbox-min.js\”></script>
<script type=\”text/javascript\”>
$(document).ready(function(){
$(\”.keleyi_com\”).colorbox({ rel: \’group1\’, transition: \”none\”, innerWidth: \’700px\’ });
});
</script>
</head>
<body>
<div style=\”width:400px;margin-left:auto;margin-right:auto;\”>
请点击下面链接，即可在弹出层显示图片组。
<p><a class=\”keleyi_com\” href=\”http://keleyi.com/keleyi/phtml/picnext/images/k02.jpg\” title=\”菊花\”>图片一</a></p>
<p><a class=\”keleyi_com\” href=\”http://keleyi.com/keleyi/phtml/picnext/images/k03.jpg\” title=\”开心\”>图片二</a></p>
<p><a class=\”keleyi_com\” href=\”http://keleyi.com/keleyi/phtml/picnext/images/k05.jpg\” title=\”宋慧乔\”>图片三</a></p>
<p><a class=\”keleyi_com\” href=\”http://keleyi.com/keleyi/phtml/picqiehuan/p3.jpg\” title=\”梦想\”>图片四</a></p>
</div></body>
</html>
本文转载自柯乐义http://keleyi.com/a/bjac/141932b419e08101.htm
