51windows 的 Blog 看到的,很不错的一个特效,浏览器兼容性不错。贴到这里备用。

原文地址:
http://www.51windows.net/data/files/file_557.asp?frame=no

查看效果:
http://www.51windows.net/51windows_files/js/webtabs/webtabs.htm

webtabs.htm XML/HTML代码

<html>  
<head>  
<title>Web Tabs Demo - 51windows.net</title>  
<style>  
body { background: buttonface; font-family: Tahoma; font-size: 12px; margin: 0px }   
div,td{font-size:9pt;}   
</style>  
<script type="text/javascript" src="webtabs.js"></script>  
<script language=javascript>  
function f_start() {   
var Widget = new WebTabs_widget(480, 320, 10, 10, "absolute")   
Widget.add(new WebTabs_tab("51windows", "page_1", "http://www.51windows.Net/favicon.ico"))   
Widget.add(new WebTabs_tab("Blueidea", "page_2", "http://www.Blueidea.com/favicon.ico"))   
Widget.add(new WebTabs_tab("Google", "page_3", "http://www.google.com/favicon.ico"))   
Widget.add(new WebTabs_tab("Msn", "page_4", "http://www.Msn.com/favicon.ico"))   
Widget.add(new WebTabs_tab("Yahoo", "page_5", "http://www.Yahoo.com/favicon.ico"))   
document.getElementById("WebTabs_container").innerHTML = Widget  
Widget.f_init_tabs()   
//Widget.f_move_to(120, 20)   
Widget.f_move_by(20, 20)   
Widget.f_activate_tab(3)   
}   
</script>  
</head>  
<body>  
  
<div id=WebTabs_container></div>  
  
<div id=page_1 class=WebTabs-external-page-container>  
<div class=WebTabs-internal-page-container>  
<table border="0" cellpadding="5" cellspacing="5" width="100%" height="100%">  
<tr>  
<td width="100%" align="center">www.51windows.Net</td>  
</tr>  
</table>  
</div>  
</div>  
  
<div id=page_2 class=WebTabs-external-page-container>  
<div class=WebTabs-internal-page-container>  
<table border="0" cellpadding="5" cellspacing="5" width="100%" height="100%">  
<tr>  
<td width="100%" align="center">www.blueidea.com</td>  
</tr>  
</table>  
</div>  
</div>  
  
<div id=page_3 class=WebTabs-external-page-container>  
<div class=WebTabs-internal-page-container>  
<table border="0" cellpadding="5" cellspacing="5" width="100%" height="100%">  
<tr>  
<td width="100%" align="center">www.Google.com</td>  
</tr>  
</table>  
</div>  
</div>  
  
<div id=page_4 class=WebTabs-external-page-container>  
<div class=WebTabs-internal-page-container>  
<table border="0" cellpadding="5" cellspacing="5" width="100%" height="100%">  
<tr>  
<td width="100%" align="center">www.Msn.com</td>  
</tr>  
</table>  
</div>  
</div>  
  
<div id=page_5 class=WebTabs-external-page-container>  
<div class=WebTabs-internal-page-container>  
<table border="0" cellpadding="5" cellspacing="5" width="100%" height="100%">  
<tr>  
<td width="100%" align="center">www.Yahoo.com</td>  
</tr>  
</table>  
</div>  
</div>  
  
<script>f_start();</script>  
</body>  
</html>

webtabs.js
下载:/upload/webtabs.js