演示地址:
http://www.corange.cn/demo/3860/index.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弹出图片组浏览层-www.corange.cn</title>
<link rel="stylesheet" href="colorbox.css" />
<script type="text/javascript" src="../jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery.colorbox-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".colorbox").colorbox({ rel: 'group1', transition: "none", innerWidth: '700px' });
});
</script>
</head>
<body>
<div style="width:400px;margin-left:auto;margin-right:auto;">
点击下面链接,即可在弹出层显示图片组。
<p><a class="colorbox" href="../demo1.jpg">ASP</a></p>
<p><a class="colorbox" href="../demo2.jpg">PHP</a></p>
<p><a class="colorbox" href="../demo3.jpg">JSP</a></p>
<p><a class="colorbox" href="../demo4.jpg">ASP.NET</a></p>
</div></body>
</html>
原文地址: http://www.corange.cn/archives/2013/03/3860.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弹出图片组浏览层-www.corange.cn</title>
<link rel="stylesheet" href="colorbox.css" />
<script type="text/javascript" src="../jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery.colorbox-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".colorbox").colorbox({ rel: 'group1', transition: "none", innerWidth: '700px' });
});
</script>
</head>
<body>
<div style="width:400px;margin-left:auto;margin-right:auto;">
点击下面链接,即可在弹出层显示图片组。
<p><a class="colorbox" href="../demo1.jpg">ASP</a></p>
<p><a class="colorbox" href="../demo2.jpg">PHP</a></p>
<p><a class="colorbox" href="../demo3.jpg">JSP</a></p>
<p><a class="colorbox" href="../demo4.jpg">ASP.NET</a></p>
</div></body>
</html>
原文地址: http://www.corange.cn/archives/2013/03/3860.html