第一步: 制作導航欄和內容頁。
首先要制作導航欄和內容頁，這樣才能繼續后面的工作。
打開網頁制作軟件Dreamweaver，按組合鍵“Ctrl+N”打開“新建文檔”對話框。依次單擊窗口左邊的“空白頁”、窗口中間“頁面類型”字樣下方的“HTML”和窗口右下角的“創建”按鈕。這樣便創建了一個空白的網頁文件。
在“<body>”字樣下方輸入以下代碼：
<table>
<tr>
<td style="vertical-align: top;">
<div class="nav">
<a href="#" id="tab1" onclick="switchPage('tab1', 'page1')" class="select"><span>頁面</span></a>
<a href="#" id="tab2" onclick="switchPage('tab2', 'page2')" class="unselect"><span>頁面2</span></a>
<a href="#" id="tab3" onclick="switchPage('tab3', 'page3')" class="unselect"><span>頁面3</span></a>
<a href="#" id="tab4" onclick="switchPage('tab4', 'page4')" class="unselect"><span>頁面4</span></a>
</div>
</td>
<td>
<div id="content">
<div id="page1" class="select" style="filter:alpha(opacity=100);">這是頁面1</div>
<div id="page2" class="unselect">這是頁面2</div>
<div id="page3" class="unselect">這是頁面3</div>
<div id="page4" class="unselect">這是頁面4</div>
</div>
</td>
</tr>
</table>
第二步：編寫CSS代碼
導航欄和內容區制作好了，下面用CSS代碼控制他們的外觀。
在“</head>”字樣的上方輸入如下代碼：
<style type="text/css">
/* 控制導航欄的外觀 */
.nav {
float:left;
width:200px;
border: solid 1px #111111;
}
/* 控制導航欄內按鈕的外觀 */
.nav a{
line-height:18px;
font-size: 12px;
color: #000000;
text-decoration: none;
display: block;
height:30px;
text-align: center;
border-bottom: #111111 solid 1px;
}
/* 控制導航欄內按鈕文字的位置 */
.nav span {
position: relative;/* 定位是相對位置 */
top: 8px;/* 上邊距為8像素 */
}
/* 控制導航欄內未選中按鈕的外觀 */
.nav .unselect{
font-weight: normal;
background-color: #FFFFFF;
}
/* 控制導航欄內選中按鈕的外觀 */
.nav .select{
font-weight: bold;
background-color: #CCCCCC;
}
/* 控制已顯示頁面（暨內容區）的外觀 */
#content .select {
display: block;
width: 500px;
height: 500px;
background: #CCCCCC;
border: #111111 solid 1px;
filter:alpha(opacity=0);
}
/* 控制未顯示頁面（暨內容區）的外觀 */
#content .unselect {
display: none;
filter:alpha(opacity=0);
opacity: 0.00;
}
</style>
第三步：編寫JavaScript代碼
下面編寫實現了漸變切換效果的JavaScript代碼。
在“</head>”字樣上方輸入下面的代碼：
<script type="text/javascript">
var activeTabId = 'tab1'; // 當前被選中的按鈕的 ID
var activePageId = 'page1'; // 當前正顯示的頁面（暨內容區）的 ID
var clickPageId; // 將要顯示的頁面
var opacity = 100; // 將要隱藏和將要顯示的頁面的透明度
var timer; // 存放生成后的定時器
var isIE = navigator.userAgent.indexOf("MSIE") >= 0; // 判斷是否為IE瀏覽器，因IE瀏覽器與Firefox等瀏覽器設置透明度的方法不相同。代碼中藉由此變量判斷以便運行不同的代碼。
var isSwitch = false; // 是否正在切換頁面
// 將頁面漸變顯示出來的函數
function showPage() {
// 獲取要顯示的頁面
var page = document.getElementById(clickPageId);
// 對象不存在則函數立即返回
if(!(page)) return false;
// 將變量中透明度設置到頁面上
if(isIE) {
page.filters.alpha.opacity = opacity;
} else {
page.style.opacity = opacity / 100;
}
// 如果要顯示頁面的透明度還沒有到 100 則繼續遞增透明度
if(opacity < 100) {
opacity = opacity + 10;
// 要顯示頁面的透明度已經達到 100，暨已漸變顯示完畢
} else {
clearInterval(timer); // 清除定時器
// 重置變量
isSwitch = false;
activePageId = clickPageId;
}
// 如果類名不等于 select 則將其設置為 select
if(page.className != 'select') page.className = 'select';
}
// 將頁面漸變隱藏的函數
function hidePage() {
var page = document.getElementById(activePageId);
if(!(page)) return false;
if(isIE) {
page.filters.alpha.opacity = opacity;
} else {
page.style.opacity = opacity / 100;
}
if(opacity > 10) {
opacity = opacity - 10; // 這里是遞減透明度，和顯示頁面時的遞增相反。
} else {
clearInterval(timer);
page.className = 'unselect';
opacity = 0;
// 啟動漸變顯示頁面的定時器
timer = setInterval(showPage, 50);
}
}
// 開始進行頁面的漸變切換，此函數初始化一些變量
function switchPage(tabId, pageId) {
// 當前正在切換頁面，不能再次切換其他頁面，因此函數立即返回
if(isSwitch) {
return false;
} else {
isSwitch = true;
}
// 要顯示的頁面已經被顯示則函數立即返回
if(tabId == activeTabId) return false;
// 獲取要顯示和要隱藏的頁面對應的按鈕
var tab1 = document.getElementById(tabId);
var tab2 = document.getElementById(activeTabId);
// 要顯示的頁面對應的按鈕不存在則函數立即返回
if(!(tab1)) return false;
// 將 要顯示的頁面對應的按鈕的CSS類名設置成 select，使其與其他按鈕的外觀不同。同時將其他按鈕的外觀恢復到普通狀態。
tab1.className = "select";
if(tab2) tab2.className = "unselect";
activeTabId = tabId;
clickPageId = pageId;
opacity = 100;
// 啟動漸變隱藏頁面的定時器
timer = setInterval(hidePage, 50);
}
</script>
新聞熱點
疑難解答
