页面切换 学QQ网站的渐变显示
技术与开发
小龙在访问腾讯网站时，看到一种有趣的页面切换效果，当单击左边导航栏区域内的标签时页面并不是立即切换，而是先让正在显示的页面渐渐地消失，然后把要显示的页面渐渐地显示出来。他很喜欢这种效果，但不知道如何在自己的网站上设计相似效果。
这种效果主要使用JavaScript语言中的定时器来完成的。首先设计好页面布局，左边是导航栏，右边是页面内容，因为右边内容区只能同时显示一个页面，因此除了第一个页面外，其他的全部隐藏起来。
然后编写切换页面的JavaScript代码，当单击导航栏区域内的标签时，启动定时器，定时器不断调整当前页面的透明度，使其慢慢从清晰变为模糊直至隐藏。然后再次启动另外一个定时器，使欲显示的页面慢慢显示并逐渐从模糊变清晰。JavaScript中的定时器用途很广，还可以用来设计计时牌等效果。
小知识: JavaScript的定时器有两种，一种是每隔一段时间便触发一次，这种计时器用setInterval函数创建，用clearInterval函数清除。另一种只触发一次，用setTimeout函数创建，用clearTimeout函数清除。
第一步 设计页面布局
首先要制作导航栏和内容页面，这样才能继续后面的工作。打开网页制作软件Dreamweaver，按组合键“Ctrl+N”打开“新建文档”对话框。依次单击窗口左边的“空白页”、窗口中间“页面类型”字样下方的“HTML”和窗口右下角的“创建”按钮，这样便创建了一个空白的网页文件。在＜body＞下方输入相关代码，其中关键代码如下所示（完整代码下载地址：http://www.shudoo.com/bzsoft）：
＜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＞
第二步 美化页面
页面布局完成后，为了使页面更加好看，我们可以美化一下页面的外观。在的上方输入相关代码即可（代码下载地址：http://www.shudoo.com/bzsoft）。
第三步 编写渐变代码
现在我们该实现渐变切换效果了。在上方输入相关代码，其中关键代码如下所示（完整代码下载地址：http://www.shudoo.com/bzsoft）：
// 将页面渐变隐藏的函数
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）;
代码全部输入完毕，按组合键“Ctrl+S”打开保存文件的对话框，在“文件名”字样后输入一个文件名，然后单击“保存”按钮。现在可以在浏览器中看到效果了。
编后
本文的特殊效果利用了定时器周期性的特性，利用这种特性，我们还可以制作重要日子的倒计时液晶表，例如奥运会的倒计时、自动滑动的公告板等。