那要如何作到這樣的效果呢？首先要介紹的就是 shadowbox.js 這個簡單好用的小程式：
(1) 下載後解壓縮在某個目錄下
(2) 編輯一個網頁程式 sample.html 在<head>中加入 shadowbox.js 和 shadowbox.css
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
(3) 設定要開啟浮動視窗效果的內容
<script type="text/javascript">
Shadowbox.init({
language: 'en',
players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']
});
var options = {
continuous: true
};
var boxObj = {
player: 'img',
content: 'http://www.nintendo.com.au/ngmcontent/Image/Zelda-PH-logo.jpg',
title: 'show image',
options: options
};
</script>
(4) 開啟浮動視窗效果
<a href="javascript:Shadowbox.open(boxObj1)">Open Shadowbox</a>
點選Open shadowbox連結就會開啟上圖特效囉
沒有留言:
張貼留言