一款经典简洁的javascript+css Tab转换特效代码

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title> 滑动门</title>
<style media=”screen” type=”text/css”>
<!–
*{font-size:12px;}
html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}
UL{list-style-type:none; margin:0px;}
/* 标准盒模型 */
.ttl{height:18px;}
.ctt{height:auto;padding:6px;clear:both;border:1px solid #064ca1;border-top:0;text-align:left;}
.w936{margin:2px 0;clear:both;width:936px;/*滑动门的宽度*/}
/* TAB 切换效果 */
.tb_{background-image: url(‘http://websky18.com/d/file/mimg/tabs1.gif’); background-repeat: repeat-x;background-color: #E6F2FF;}
.tb_ ul{height:24px;}
.tb_ li{float:left;height: 24px;line-height:1.9;width: 94px;cursor:pointer;}
/* 控制显示与隐藏css类 */
.normaltab   { background-image:url(‘http://websky18.com/d/file/mimg/tabs2.gif’); background-repeat: no-repeat; color:#1F3A87 ;}
.hovertab    { background-image: url(‘http://websky18.com/d/file/mimg/tabs3.gif’); background-repeat: no-repeat; color:#1F3A87; font-weight:bold }
.dis{display:block;}
.undis{display:none;}
–>
</style>
<script type=”text/javascript” language=”javascript”>
//<!CDATA[
function g(o){return document.getElementById(o);}
function HoverLi(n){
//如 果有N个标签,就将i<=N;
for(var i=1;i<=6;i++){g(‘tb_’+i).className=’normaltab’;g(‘tbc_0’+i).className=’undis’;}g(‘tbc_0’+n).className=’dis’;g(‘tb_’+n).className=’hovertab’;
}
// 如果要做成点击后再转到请将<li>中的onmouseover 改成 onclick;
//]]>
</script>
</head>
<body>
<div >
<div id=”tb_”>
<ul>
<li id=”tb_1″ onmouseover=”x:HoverLi(1);”>
ASP.NET</li>
<li id=”tb_2″ onmouseover=”i:HoverLi(2);”>
MYSQL</li>
<li id=”tb_3″ onmouseover=”a:HoverLi(3);”>
DELPHI</li>
<li id=”tb_4″ onmouseover=”o:HoverLi(4);”>
VB.NET</li>
<li id=”tb_5″ onmouseover=”g:HoverLi(5);”>
JAVA</li>
<li id=”tb_6″ onmouseover=”z:HoverLi(6);”>
PHP5</li>
</ul>
</div>
<div >
<div id=”tbc_01″>这里是ASP.NET的相关内容</div>
<div id=”tbc_02″>这里是MYSQL的相关内容</div>
<div id=”tbc_03″>这里是DELPHI的相关内容</div>
<div id=”tbc_04″>这里是VB.NET的相关内容</div>
<div id=”tbc_05″>这里是JAVA的相关内容</div>
<div id=”tbc_06″>这里是PHP5的相关内容</b>
</div>
</div>
</div>
</body>
</html>

50个令人叹为观止的JavaScript应用站点

随着诸如 jQuery, Mootools, Prototype 一类的 JavaScript 框架的崛起,Web 开发者们基于这些框架创建了众多令人叹为观止的效果。以下的50个站点全部基于 JavaScript,却拥有 Flash 一样的绚丽效果。在很多 Web 开发者看来,Flash 并不是他们的首要选择,因为 Flash 至今对搜索引擎仍是不透明的,另外,Flash 的渲染需要浏览器插件,而 JavaScript 的一切都是本地的。

Tabs

Aviary – http://aviary.com/

Aviary 使用了非常圆润的 Tab 效果,点击 Tab 后,渐出渐入的栏目介绍性内容非常漂亮,它的基于 JavaScript 的下拉菜单也美轮美奂。

Toolani – http://www.toolani.de/

黄色内容区块下方的,基于 jQuery 的 Tabs 非常漂亮。

Podcasttuneup – http://www.podcast-tuneup.com/

漂亮的 Tab 带着有趣的上卷与下卷效果。作为对比,该 Tab 框上方还有一个基于 Flash 的 Tab 框,可以看出,Flash 的反应速度明细要快得多,然而却要等半天的时间加载。

Adworks – http://www.adworks.ro/

尽管这些 Tab 并不象前面提到的那几个,带渐入溅出效果,但那些大图标实在惹人喜欢。

We are Sofa – http://www.madebysofa.com/

如果你想用文字式 Tab 这个网站是个很好的例子。

幻灯式内容

monofactor -http://www.monofactor.com/

这个重新设计后的站点使用幻灯风格展示作者的作品。

Alex Buga – http://www.alexbuga.com/

Alex Buga 自诩为 Web 设计超级明星,使用了类似幻灯片的方式展示他最近的活动。位于右上角的那个主导航条也很 Cool,不过该站点大量使用了 Ajax。

Coda, one Window Web development – http://www.panic.com/coda/

这个站可谓家喻户晓。是很多人获得灵感的地方。

Kobe – http://www.arcinspirations.com/kobe/

漂亮的幻灯式内容效果,并结合了 Flash。(该站使用了单页式设计)

Dibusoft mmdv – http://www.dibusoft.com/

Dibusoft 使用了水平滚动图片加垂直滚动文字使用内容的幻灯式变换。它的主菜单则使用 JavaScript 实现 Lava Lamp 效果。

Continue reading →