第一步: 制作导航栏和内容页。
首先要制作导航栏和内容页，这样才能继续后面的工作。
打开网页制作软件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>
新闻热点
疑难解答
