由 套用的就是facebox這套燈箱特效
以jquery為基礎的lightbox
效果可針對圖片image、圖層div、與網頁html
檔案包含JS檔與CSS檔總共不到50K
算是輕薄短小的燈箱工具
DEMO可參考此 網址
特效教學
網頁載入Facebox的方式可於</head>前、<body> 後或任何呼叫facebox功能的html碼之前
插入以下程式碼 ↓
- 代碼: 選擇全部
<script src="facefiles/jquery-1.2.2.pack.js" type="text/javascript"></script>
<link href="facefiles/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="facefiles/facebox.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
</script>
在<body>標籤內使用facebox的方式如下：
圖片用法
- 代碼: 選擇全部
<a href="123.jpg" rel="facebox">連結圖片效果</a>
網頁用法
- 代碼: 選擇全部
<a href="123.html" rel="facebox">連結網頁效果</a>
圖層用法
- 代碼: 選擇全部
<a href="#123" rel="facebox">呼叫圖層效果</a>
<div id="123" style="display:none"> 這是隱藏的內容被facebox顯示。 </div>
特效應用
如phpBB3上由kber所開發的「User_avatar facebox」模組就是使用這個特效
點選該網站右方kber的頭像後便會蹦出個人資料detail
Download 請下載附件。
您所在的用戶組無法下載或查看附件。
