DHTML,经典应用——Tab菜单（山寨腾讯迷你首页）
- 十一月 14th, 2009
- Posted in 网站前端
- Write comment
DHTML（Dynamic HTML）就是动态HTML，由网景公司和为图案公司提出，DHTML并不是一项新的技术，DHTML分为三个方面：html、css、JavaScript，只是这三项技术的结合应用，是4.x 代浏览器应当支持的新技术，现在已经大规模的应用到各大大小小网站中，是网站实现动态交互的重要技术组成部分。总结一句话：由html做容器，以css控制样式，由JavaScript响应各种用户的动作来操作各个html元素。
今早无聊看腾讯新闻时，一时心血来潮，自己做了一个仿迷你首页的Tab菜单，虽然样子有点差别，但基本功能是一样的。以下看看最终的截图
Tab菜单制作并不复杂，以下我做个简单的介绍：
HTML部分代码：
<body>
<div id="tab">
<div id="daohang">
<input type="button" id="fre" on
Click="fre()">
<div id="banner1" on
MouseOver="show(1)" style="display::">新闻</div>
<div id="banner2" on
MouseOver="show(2)" style="display::">财经</div>
<div id="banner3" on
MouseOver="show(3)" style="display::">娱乐</div>
<div id="banner4" on
MouseOver="show(4)" style="display::">√体育</div>
<div id="banner5" on
MouseOver="show(5)" style="display::">汽车</div>
<div id="banner6" on
MouseOver="show(6)" style="display:none;">读书</div>
<div id="banner7" on
MouseOver="show(7)" style="display:none;">博客</div>
<input type="button" id="back" on
Click="back()">
</div>
<div id="content">
<div id="content1" style="display:"> 新闻频道内容…</div>
<div id="content2" style="display:none;">财经频道内容…</div>
<div id="content3" style="display:none;">娱乐频道内容…</div>
<div id="content4" style="display:none;">√体育频道内容…</div>
<div id="content5" style="display:none;">汽车频道内容…</div>
<div id="content6" style="display:none;">读书频道内容…</div>
<div id="content7" style="display:none;">博客频道内容…</div>
</div>
</div>
</body>
代码分析：html部分比较简单，无非是用div 控制内容，和响应事件的动作。
Css部分：
<style type="text/css">
#tab{
width:435px;
height:auto;}
#daohang div{
width:73px;
height:23px;
border:A1DEFE solid 1px;
float:left;
margin-left:2px;
text-align:center;
padding-top:4px;
background:url(notfocus.jpg) no-repeat;
color:#0066A6;
font-size:14px;}
#back{
float:left;
width:25px;
height:23px;
border:A1DEFE solid 1px;
background:url(back.jpg) no-repeat;
margin-left:2px;}
#fre{
float:left;
width:25px;
height:23px;
border:A1DEFE solid 1px;
background:url(fre.jpg) no-repeat;
margin-left:2px;}
#fre:hover{
float:left;
width:25px;
height:23px;
border:A1DEFE solid 1px;
background:url(fre.jpg) no-repeat;
margin-left:2px;}
#content{
margin-top:5px;}
#content div{
clear:both;
border:#AADDFF solid 1px;
width:430px;
height:320px;}
.show{
display:;}
.hidden{
display:none;}
</style>
代码分析：除了常规的控制宽度、高度、边距的css代码，主要应用到display这个属性（html元素的显示方式），和伪类hover（鼠标放置在元素上时的css样式）
JavaScript部分：
<script language="javascript">
var fid=1;
var ffid=0;
function show(id)
{
fsty=document.getElementById("content"+fid).style;
nsty=document.getElementById("content"+id).style;
switch(id)
{ case 1:
document.getElementById("fre").disabled=true;
break;
case 7:
document.getElementById("back").disabled=true;
break;
default:
document.getElementById("fre").disabled=false;
document.getElementById("back").disabled=false;
break;
}
document.getElementById("banner"+fid).style.background=’url(notfocus.jpg) no-repeat’;
document.getElementById("banner"+fid).style.color=”;
document.getElementById("banner"+id).style.background=’url(show.jpg) no-repeat’;
document.getElementById("banner"+id).style.color=’000000′;
fsty.display=’none’;
nsty.display=”;
fid=id;
}
function back()
{
if(ffid<2)
{
ffid=ffid+1;
document.getElementById("banner"+ffid).style.display=’none’;
lastid=ffid+5;
document.getElementById("banner"+lastid).style.display=”;
}
}
function fre()
{
if(ffid>0)
{
document.getElementById("banner"+ffid).style.display=”;
lastid=ffid+5;
document.getElementById("banner"+lastid).style.display=’none’;
ffid=ffid-1;
}
}
</script>
代码分析：这个是最核心的部分了，通过JavaScript控制元素的显示情况和样式变化，限于篇幅，不能一行行解释，在这个JavaScript中写了三个函数show(int)、fre()、back()，show()主要是控制鼠标放在不同按钮上显示出不同的内容和样式变化，fre()和back()主要是在控制导航栏显示的按钮(总共有7个栏目，但只显示5个，通过按钮控制显示的导航按钮)
核心在于全局变量fid和ffid的运用，通过fid、ffid记录上一次的动作，通过用户的动作的不同判断当前情况下，显示内容的变化和样式变化。（由于做的比较粗糙，代码有点长，花点时间可以将代码简化）
图片部分：
这部分比较简单，做四张图片就可以了，单纯渐变做的话比较生硬，没有高光效果，可以用多几个图层，上淡的颜色，再高斯模糊，大功告成，掌声响起~~~
Financial Express:
www.xisn.org:
南京男科医院:
c9:
android mid:
No comments yet.