DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery使用ColorBox彈出圖片組浏覽層實例演示
jquery使用ColorBox彈出圖片組浏覽層實例演示
編輯:JQuery特效代碼     
本示例使用Jquery的ColorBox插件彈出圖片組浏覽層。效果預覽網址:http://www.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://www.keleyi.com/keleyi/phtml/colorbox/colorbox.css" />
<script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://www.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://www.keleyi.com/keleyi/phtml/picnext/images/k02.jpg" title="菊花">圖片一</a></p>
<p><a class="keleyi_com" href="http://www.keleyi.com/keleyi/phtml/picnext/images/k03.jpg" title="開心">圖片二</a></p>
<p><a class="keleyi_com" href="http://www.keleyi.com/keleyi/phtml/picnext/images/k05.jpg" title="宋慧喬">圖片三</a></p>
<p><a class="keleyi_com" href="http://www.keleyi.com/keleyi/phtml/picqiehuan/p3.jpg" title="夢想">圖片四</a></p>
</div></body>
</html>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved