JsTAB选项卡示例集合(二)

jhlovett

浏览: 612019 次
性别:
来自: 卡哇伊

最近访客更多访客>>

vcmasm

成长的菜鸟

zaweze

wwwxxxttt

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Javascript

ASP.net ASP VC++JavaScript VB.NET

仿163的一款TAB选项卡，有的人也称它为网页标签。本标签用到了三个gif背景图片，运行的时候可以点右键保存；无意发现了一这一个，觉得很不错应该奉献给大家，因为它不但美观，而且兼容性好，标签还可以自适应宽度，非常实用

<!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>
<TITLE>仿网易TAB标签</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>
BODY {
	FONT-SIZE: 14px;
}
OL LI {
	MARGIN: 8px
}
#con {
	FONT-SIZE: 12px;
	MARGIN: 0px auto;
	WIDTH: 600px
}
#tags {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px 0px 0px 10px;
	WIDTH: 400px;
	PADDING-TOP: 0px;
	HEIGHT: 23px
}
#tags LI {
	BACKGROUND: url(http://jhxk.iteye.com/upload/attachment/136408/f89059e8-7235-30c7-956f-6944089cd2a3.gif) no-repeat left bottom;
	FLOAT: left;
	MARGIN-RIGHT: 1px;
	LIST-STYLE-TYPE: none;
	HEIGHT: 23px
}
#tags LI A {
	PADDING-RIGHT: 10px;
	PADDING-LEFT: 10px;
	BACKGROUND: url(http://jhxk.iteye.com/upload/attachment/136410/bfc50a6e-4732-375e-8769-8c6ee90a5618.gif) no-repeat right bottom;
	FLOAT: left;
	PADDING-BOTTOM: 0px;
	COLOR: #999;
	LINE-HEIGHT: 23px;
	PADDING-TOP: 0px;
	HEIGHT: 23px;
	TEXT-DECORATION: none
}
#tags LI.emptyTag {
	BACKGROUND: none transparent scroll repeat 0% 0%;
	WIDTH: 4px
}
#tags LI.selectTag {
	BACKGROUND-POSITION: left top;
	MARGIN-BOTTOM: -2px;
	POSITION: relative;
	HEIGHT: 25px
}
#tags LI.selectTag A {
	BACKGROUND-POSITION: right top;
	COLOR: #000;
	LINE-HEIGHT: 25px;
	HEIGHT: 25px
}
#tagContent {
	BORDER-RIGHT: #aecbd4 1px solid;
	PADDING-RIGHT: 1px;
	BORDER-TOP: #aecbd4 1px solid;
	PADDING-LEFT: 1px;
	PADDING-BOTTOM: 1px;
	BORDER-LEFT: #aecbd4 1px solid;
	PADDING-TOP:1px;
	BORDER-BOTTOM: #aecbd4 1px solid;
	BACKGROUND-COLOR: #fff
}
.tagContent {
	PADDING-RIGHT: 10px;
	DISPLAY: none;
	PADDING-LEFT: 10px;
	BACKGROUND: url(http://jhxk.iteye.com/upload/attachment/136408/f89059e8-7235-30c7-956f-6944089cd2a3.gif) repeat-x;
	PADDING-BOTTOM: 10px;
	WIDTH: 576px;
	COLOR: #474747;
	PADDING-TOP: 10px;
	HEIGHT: 250px
}
#tagContent DIV.selectTag {
	DISPLAY: block
}
</STYLE>
</HEAD>
<BODY>
<DIV id=con>
  <UL id=tags>
    <LI><A onClick="selectTag('tagContent0',this)" 
  href="javascript:void(0)">源码爱好者</A> </LI>
    <LI class=selectTag><A onClick="selectTag('tagContent1',this)" 
  href="javascript:void(0)">ASP源码</A> </LI>
    <LI><A onClick="selectTag('tagContent2',this)" 
  href="javascript:void(0)">自适应宽度的标签</A> </LI>
  </UL>
  <DIV id=tagContent>
    <DIV class=tagContent id=tagContent0>源码爱好者（<a href="http://www.codefans.net">CoreFans.net</a>）提供各类编程源码、书籍教程、JavaScript/CSS特效代码以及常用软件下载等，做有质量的学习型源码下载站。</DIV>
    <DIV class="tagContent selectTag" id=tagContent1>这时是ASP标签的内容。</DIV>
    <DIV class=tagContent id=tagContent2>自适应宽度的标签内容。</DIV>
  </DIV>
</DIV>
<SCRIPT type=text/javascript>
function selectTag(showContent,selfObj){
	// 标签
	var tag = document.getElementById("tags").getElementsByTagName("li");
	var taglength = tag.length;
	for(i=0; i<taglength; i++){
	tag[i].className = "";
	}
	selfObj.parentNode.className = "selectTag";
	// 标签内容
	for(i=0; j=document.getElementById("tagContent"+i); i++){
	j.style.display = "none";
	}
	document.getElementById(showContent).style.display = "block";
}
</SCRIPT>
</BODY>
</HTML>

淡蓝色竖向简洁Tab

淡蓝色竖向简洁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>
<title>div+css+js实现菜单的收缩与展开</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
	margin: 30px auto;
}
ul {
	list-style: none;
}
#faq {
	font-size: 12px;
	width: 800px;
}
#faq li {
	margin: 0 0 10px;
	padding: 0 0 5px;
}
#faq dl {
	margin: 0;
	padding:0;
	display:inline;
}
#faq dt {
	font-weight:bold;
	cursor:pointer;
	line-height: 20px;
	padding: 0 0 5px 22px;
	border-bottom:1px #ccc dotted;
}
#faq dd {
	display:none;
	margin:0;
	padding: 5px 0 5px 20px;
	background:#E5ECF9;
	line-height: 180%;
}
</style>
<script type="text/javascript">
var lastFaqClick=null;
window.onload=function(){
  var faq=document.getElementById("faq");
  var dls=faq.getElementsByTagName("dl");
  for (var i=0,dl;dl=dls[i];i++){
    var dt=dl.getElementsByTagName("dt")[0];//取得标题
     dt.id = "faq_dt_"+(Math.random()*100);
     dt.onclick=function(){
       var p=this.parentNode;//取得父节点
        if (lastFaqClick!=null&&lastFaqClick.id!=this.id){
          var dds=lastFaqClick.parentNode.getElementsByTagName("dd");
          for (var i=0,dd;dd=dds[i];i++)
            dd.style.display='none';
        }
        lastFaqClick=this;
        var dds=p.getElementsByTagName("dd");//取得对应子节点，也就是说明部分
        var tmpDisplay='none';
        if (gs(dds[0],'display')=='none')
          tmpDisplay='block';
        for (var i=0;i<dds.length;i++)
          dds[i].style.display=tmpDisplay;
      }
  }
}

function gs(d,a){
  if (d.currentStyle){
    var curVal=d.currentStyle[a]
  }else{
    var curVal=document.defaultView.getComputedStyle(d, null)[a]
  }
  return curVal;
}
</script>
</head>
<body>
<ul id="faq">
  <li>
    <dl>
      <dt>关于源码爱好者网站</dt>
      <dd>源码爱好者（www.CoreFans.net）提供各类编程源码、书籍教程、JavaScript/CSS特效代码以及常用软件下载等，做有质量的学习型源码下载站。</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>源码爱好者是一个学习型源码下载站</dt>
      <dd>源码爱好者立志做一个最好的学习型源码下载站，欢迎您的经常光临，也欢迎提出宝贵建议！</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>AjAX是什么？</dt>
      <dd>一种能够提升用户体验的WEB2.0新型技术，可以实现像电脑系统一样的操作体验，类似本地化的一种脚本技术。</dd>
    </dl>
  </li>
</ul>
</body>
</html>

自动定时切换的TAB选项卡/滑动门

这个滑动门特效不错，可以设定时间，自动循环切换，也可以鼠标控制，而且选项卡也比较漂亮，在新浪和百度见到过这种自动切换的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>Tabs - CodeFans.net</title>
<style>
#index_yp {
	width:235px;
	height:300px;
	float:left
}
.index_yp_card {
	width:235px;
	height:37px;
	float:left
}
.yp_card_0, .yp_card_2, .yp_card_4 {
	width:55px;
	height:37px;
	float:left;
	background-image:url(http://jhxk.iteye.com/upload/attachment/136440/9b1a9a8c-c348-3e2c-8a11-a3fe1d356ca0.png);
	text-align:center;
	color:#003366;
	font-weight:bold;
	line-height:32px;
	cursor:pointer
}
.yp_card_1, .yp_card_3, .yp_card_5, .yp_card_6 {
	width:45px;
	height:37px;
	float:left;
	background-image:url(http://jhxk.iteye.com/upload/attachment/136440/9b1a9a8c-c348-3e2c-8a11-a3fe1d356ca0.png);
	text-align:center;
	color:#333333;
	line-height:32px;
	cursor:pointer
}
.yp_card_0 {
	background-position:0px 0px
}
.yp_card_1 {
	background-position:-55px 0px
}
.yp_card_2 {
	background-position:-100px 0px
}
.yp_card_3 {
	background-position:-155px 0px
}
.yp_card_4 {
	background-position:-200px 0px
}
.yp_card_5 {
	background-position:-255px 0px
}
.yp_card_6 {
	background-position:-300px 0px
}
.index_yp_main {
	width:215px;
	height:262px;
	float:left;
	border:1px solid #71B3C6;
	border-top:0px!important;
	padding:0px 9px 0px 9px
}
.yp_main_content {
	width:201px;
	height:33px;
	float:left;
	border:1px solid #BCDCE4;
	background-color:#F1F8FA;
	margin-bottom:7px;
	padding:3px 6px 3px 6px;
	overflow:hidden
}
.yp_main_content dt {
	width:201px;
	height:13px;
	float:left;
	font-weight:normal;
	margin:0px;
	font-size:12px;
	padding-top:2px
}
.yp_main_content dd {
	width:201px;
	line-height:13px;
	float:left;
	font-weight:normal;
	margin:0px;
	font-size:12px;
	padding-top:3px;
	text-align:right
}
.yp_main_content img {
	padding:0px 0px 2px 3px
}
.yp_main_list {
	width:215px;
	float:left
}
#index_m2_ad {
	width:690px;
	height:100px;
	padding:5px 0px 0px 5px;
	float:left
}
</style>
</head>
<body>
<div id="index_yp">
  <!--yp1 start-->
  <div id="yp_card1" style="display:block">
    <div class="index_yp_card">
      <div onmouseover="changeMc(1,1)" onmouseout="hi()" class="yp_card_0">ASP</div>
      <div onmouseover="changeMc(1,2)" onmouseout="hi()" class="yp_card_3">PHP</div>
      <div onmouseover="changeMc(1,3)" onmouseout="hi()" class="yp_card_3">JSP</div>
      <div onmouseover="changeMc(1,4)" onmouseout="hi()" class="yp_card_3">VC++</div>
      <div onmouseover="changeMc(1,5)" onmouseout="hi()" class="yp_card_5">综合</div>
    </div>
    <div onmouseover="changeMc(1,1)" onmouseout="hi()" class="index_yp_main">ASP(循环周期(1秒))</div>
  </div>
  <!--end-->
  <!--yp2 start-->
  <div id="yp_card2" style="display:none">
    <div class="index_yp_card">
      <div onmouseover="changeMc(2,1)" onmouseout="hi()" class="yp_card_1">ASP</div>
      <div onmouseover="changeMc(2,2)" onmouseout="hi()" class="yp_card_2" >PHP</div>
      <div onmouseover="changeMc(2,3)" onmouseout="hi()" class="yp_card_3">JSP</div>
      <div onmouseover="changeMc(2,4)" onmouseout="hi()" class="yp_card_3">VC++</div>
      <div onmouseover="changeMc(2,5)" onmouseout="hi()" class="yp_card_5">综合</div>
    </div>
    <div onmouseover="changeMc(2,2)" onmouseout="hi()" class="index_yp_main">PHP(循环周期(1秒))</div>
  </div>
  <!--end-->
  <!--yp3 start-->
  <div id="yp_card3" style="display:none">
    <div class="index_yp_card">
      <div onmouseover="changeMc(3,1)" onmouseout="hi()" class="yp_card_1">ASP</div>
      <div onmouseover="changeMc(3,2)" onmouseout="hi()"class="yp_card_6">PHP</div>
      <div onmouseover="changeMc(3,3)" onmouseout="hi()" class="yp_card_2">JSP</div>
      <div onmouseover="changeMc(3,4)" onmouseout="hi()" class="yp_card_3">VC++</div>
      <div onmouseover="changeMc(3,5)" onmouseout="hi()" class="yp_card_5">综合</div>
    </div>
    <div onmouseover="changeMc(3,3)" onmouseout="hi()" class="index_yp_main">JSP(循环周期(1秒))</div>
  </div>
  <!--end-->
  <!--yp4 start-->
  <div id="yp_card4" style="display:none">
    <div class="index_yp_card">
      <div onmouseover="changeMc(4,1)" onmouseout="hi()" class="yp_card_1">ASP</div>
      <div onmouseover="changeMc(4,2)" onmouseout="hi()" class="yp_card_6">PHP</div>
      <div onmouseover="changeMc(4,3)" onmouseout="hi()" class="yp_card_6">JSP</div>
      <div onmouseover="changeMc(4,4)" onmouseout="hi()" class="yp_card_2">VC++</div>
      <div onmouseover="changeMc(4,5)" onmouseout="hi()" class="yp_card_5">综合</div>
    </div>
    <div onmouseover="changeMc(4,4)" onmouseout="hi()" class="index_yp_main">VC++(循环周期(1秒))</div>
  </div>
  <!--end-->
  <!--yp5 start-->
  <div id="yp_card5" style="display:none">
    <div class="index_yp_card">
      <div onmouseover="changeMc(5,1)" onmouseout="hi()" class="yp_card_1">ASP</div>
      <div onmouseover="changeMc(5,2)" onmouseout="hi()" class="yp_card_6">PHP</div>
      <div onmouseover="changeMc(5,3)" onmouseout="hi()" class="yp_card_6">JSP</div>
      <div onmouseover="changeMc(5,4)" onmouseout="hi()" class="yp_card_6">VC++</div>
      <div onmouseover="changeMc(5,5)" onmouseout="hi()" class="yp_card_4">综合</div>
    </div>
    <div onmouseover="changeMc(5,5)" onmouseout="hi()" class="index_yp_main">综合(循环周期(1秒))</div>
  </div>
  <!--end-->
</div>
<script language="javascript" type="text/javascript">
<!--
var s=5;
var t=1000;//循环周期(1秒)
var timer;
function changeMc(x,y){
// x是当前显示的层 y是即将显示的层
 clearTimeout(timer);
 if (x!=y){
 document.getElementById('yp_card'+x).style.display = "none";
 document.getElementById('yp_card'+y).style.display = "block";
 s=y
 }
}
function hi(){
timer=setTimeout("sh()",t)
}
function sh(){
	s=(s>=5)?1:s+1
	for (var i=1;i<=5;i++){
		document.getElementById("yp_card"+i).style.display = "none";
	}
	document.getElementById("yp_card"+s).style.display = "block"
	timer=setTimeout("sh()",t)
}
sh()
 -->
</script>
</body>
</html>

横向、竖向排列的多种选项卡及滑动门

多种选项卡菜单，横向、竖向排列，有滑动门，也有需要点击才激活的滑动门（大家常说的选项卡），想用哪个你就用哪个，这里只是一种实现方法，选项卡色调什么的请根据您自己的网站风格修改下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选项卡-www.codefans.net</title>
<style type="text/css">
<!--
* {
	margin:0;
	padding:0;
	font-size:12px;
	font-weight:normal;
}
.jj {
	font-weight:bolder!important;
}
.box {
	border-top-color:#c00!important;
}
.pr {
	color:#060!important;
}
#tab01 {
	position:relative;
	width:336px;
	height:88px;
	padding-top:15px;
	margin:50px;
	overflow:hidden;
}
#tab01 h3 {
	position:relative;
	z-index:2;
	float:left;
	height:14px;
	padding:0 7px 0 8px;
	margin-left:-1px;
	border-left:solid 1px #ccc;
	border-right:solid 1px #fff;
	text-align:center;
	background:#fff;
	cursor:pointer;
}
/*/*/
#tab01 h3.up {
	height:18px;
	padding:5px 7px 0 7px;
	margin:-6px 0 0 0;
	border:solid #ccc;
	border-width:1px 1px 0;
	color:#c00;
}
#tab01 div {
	display:none;
	position:absolute;
	left:0;
	top:32px;
	z-index:1;
	width:324px;
	height:54px;
	padding:5px;
	border:solid 1px #ccc;
	color:#666;
}
#tab01 div.up {
	display:block;
}
#tab02 {
	position:relative;
	width:200px;
	margin:50px;
	border:solid #ccc;
	border-width:0 1px 1px;
}
/*/*/
#tab02 h4 {
	height:18px;
	line-height:18px;
	border:solid #ccc;
	border-width:1px 0;
	margin-bottom:-1px;
	text-align:center;
	background:#f6f6f6;
	cursor:pointer;
}
#tab02 h4.up {
	color:#c00;
}
#tab02 ol {
	display:none;
	height:54px;
	padding:5px;
	color:#666;
}
#tab02 ol.up {
	display:block;
}
#tab03 {
	position:relative;
	width:100px;
	margin:50px;
}
#tab03 h3 {
	position:relative;
	z-index:1;
	height:16px;
	padding-top:4px;
	margin-bottom:-1px;
	border:solid #ccc;
	border-width:1px 0 1px 1px;
	text-align:center;
	font-family:宋体;
	background:#eee;
	cursor:pointer;
}
#tab03 h3.up {
	z-index:3;
	color:#c00;
	background:#fff;
}
#tab03 div.tab {
	display:none;
	position:absolute;
	left:99px;
	top:0;
	z-index:2;
	width:300px;
	height:200px;
	padding:5px;
	border:solid 1px #ccc;
	color:#666;
}
#tab03 div.tab.up {
	display:block;
}
-->
</style>
</head>
<body>
<div id="tab01">
  <h3>我的首页</h3>
  <div class="jj">
    <p>我的首页，放我自己的东西哦！</p>
  </div>
  <h3 class="pr">日记</h3>
  <div>
    <p>我自己写的日记。</p>
  </div>
  <h3>音乐</h3>
  <div>
    <p>我喜欢听的音乐哦！</p>
  </div>
  <h3 class="box">回家</h3>
  <div>
    <p>我想回家！</p>
  </div>
</div>
<div id="tab02">
  <h4>源码下载</h4>
  <ol class="pr">
    <li>源码下载请到源码爱好者</li>
  </ol>
  <h4 class="box">网页特效</h4>
  <ol>
    <li>网页特效</li>
  </ol>
  <h4>可爱</h4>
  <ol>
    <li>可爱的人是谁呀？</li>
  </ol>
  <h4 class="bb">笑话</h4>
  <ol>
    <li>讲个笑话听听吧？</li>
  </ol>
</div>
<div id="tab03">
  <h3>源码首页</h3>
  <div class="tab">
    <p>源码爱好者是最好的源码下载站</p>
  </div>
  <h3>中国</h3>
  <div class="tab wushi">
    <p>中国是世界面积大的国家</p>
  </div>
  <h3>河南</h3>
  <div class="tab">
    <p>河南是中国人口最多的省份</p>
  </div>
  <h3 class="box">江苏</h3>
  <div class="tab tab123">
    <p>江苏江苏，我爱你。</p>
  </div>
</div>
</div>
<script type="text/javascript">
<!--
function Pid(id,tag){
	if(!tag){
		return document.getElementById(id);
		}
	else{
		return document.getElementById(id).getElementsByTagName(tag);
		}
}
function tab(id,hx,box,iClass,s,pr){
	var hxs=Pid(id,hx);
	var boxs=Pid(id,box);
	if(!iClass){ 
		boxsClass=boxs; 
	}
	else{
		var boxsClass = [];
		for(i=0;i<boxs.length;i++){
			if(boxs[i].className.match(/\btab\b/)){
				boxsClass.push(boxs[i]);
			}
		}
	}
	if(!pr){
		go_to(0);
		yy();
	}
	else {
		go_to(pr);
		yy();
	}
	function yy(){
		for(var i=0;i<hxs.length;i++){
			hxs[i].temp=i;
			if(!s){
				s="onmouseover"; 
				hxs[i][s]=function(){
					go_to(this.temp);
				}
			}
			else{
				hxs[i][s]=function(){
					go_to(this.temp);
				}
			}
		}
	}
	function go_to(pr){
		for(var i=0;i<hxs.length;i++){
			if(!hxs[i].tmpClass){
				hxs[i].tmpClass=hxs[i].className+=" pr1984_com";
				boxsClass[i].tmpClass=boxsClass[i].className+=" pr1984_com";
			}
			if(pr==i){
				hxs[i].className+=" up"; 
				boxsClass[i].className+=" up"; 
			}
			else {
				hxs[i].className=hxs[i].tmpClass;
				boxsClass[i].className=boxsClass[i].tmpClass;
			}
		}
	}
}

tab("tab01","h3","div","","onclick",2); 
tab("tab02","h4","ol"); 
tab("tab03","h3","div","tab"); 
//-->
</script>
</body>
</html>

CSS+JSS滚动切换的选项卡【荐】

<!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>
<title>可以滚动切换的选项卡-codefans.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<STYLE>
* {
	margin:0;
	padding:0;
	font-size:12px;
}
img {
	border:none;
}
ul, ol {
	list-style:none;
}
#content {
	margin:20px auto;
	border:1px solid #a5b5c0;
	width:188px;
	height:241px;
	background:url(http://jhxk.iteye.com/upload/attachment/136425/2d148614-7de0-3640-a495-8e068396b144.gif);
	overflow:hidden;
}
#title {
	height:17px;
*height:16px;
	background:url(http://jhxk.iteye.com/upload/attachment/136431/ae374a90-8a61-382c-b701-5051659ab449.gif) repeat-x;
	border-bottom:1px solid #a5b5c0;
	padding:3px 0 0 6px;
*padding:4px 0 0 6px;
	font-weight:700;
}
#title li {
	float:left;
	display:inline;
	width:92px;
}
#tit_l {
	float:left;
	width:92px;
	overflow:hidden;
	height:14px;
}
#tit_r {
	float:right;
	margin-top:-1px;
*margin-top:-2px;
}
#tit_r img {
	margin-right:4px;
	cursor:pointer;
}
#tit_r img:hover {
	filter: Alpha(Opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}
#text {
	clear:both;
	height:210px;
}
#text ul {
	background:url(http://jhxk.iteye.com/upload/attachment/136427/88d4c3da-0cdb-3777-9e98-7bbd52318074.gif) no-repeat 12px 4px;
	margin:6px 0;
}
#text li {
	padding-left:34px;
	line-height:21px;
}
#text li a {
	color:#123b8d;
	text-decoration:none;
}
#text li a:hover {
	text-decoration:underline;
}
</STYLE>
</head>
<body>
<DIV id=content>
  <DIV id=title>
    <DIV id=tit_l>
      <DIV id=mytit>
        <UL>
          <LI>最新更新 </LI>
          <LI>下载排行 </LI>
          <LI>最受关注 </LI>
        </UL>
      </DIV>
    </DIV>
    <DIV id=tit_r><IMG alt="" src="http://jhxk.iteye.com/upload/attachment/136429/dc248a7e-8b23-3099-8ebd-548973c5e8fb.gif"><IMG alt="" src="http://jhxk.iteye.com/upload/attachment/136433/5c77ef30-13ff-3a75-9253-42fe213b04a8.gif"></DIV>
  </DIV>
  <DIV id=text>
    <UL id=c1>
      <li><a href="/soft/1160.shtml" target="_blank">VC++实现超酷QQ界面</a></li>
      <li><a href="/soft/3477.shtml" target="_blank">基于C#同步套接字</a></li>
      <li><a href="/soft/4067.shtml" target="_blank">《网页制作完全手册》 chm</a></li>
      <li><a href="/soft/2144.shtml" target="_blank">VB调用模板进行打印的实例</a></li>
      <li><a href="/soft/1183.shtml" target="_blank">ASP.net报表设计源码包</a></li>
      <li><a href="/soft/1610.shtml" target="_blank">J2me开发环境的搭建教程</a></li>
      <li><a href="/soft/3182.shtml" target="_blank">《jQuery in Action》 源代码</a></li>
      <li><a href="/soft/3307.shtml" target="_blank">DCS PHP在线记账/记事本</a></li>
      <li><a href="/soft/2832.shtml" target="_blank">VB打印控件Listview示例</a></li>
      <li><a href="/soft/4321.shtml" target="_blank">仿支付宝CSS网站导航栏</a></li>
    </UL>
    <UL id=c2>
      <li><a href="http://codefans.net/soft/4387.shtml" target="_blank">BICQ 仿QQ聊天系统</a></li>
      <li><a href="http://codefans.net/soft/3389.shtml" target="_blank">DIV+JS弹出窗口框架</a></li>
      <li><a href="http://codefans.net/soft/4383.shtml" target="_blank">WindowLite  可拖动提示窗口</a></li>
      <li><a href="http://codefans.net/soft/4381.shtml" target="_blank">Asp生成静态完整实例</a></li>
      <li><a href="http://codefans.net/soft/4380.shtml" target="_blank">VC++固定资产管理系统</a></li>
      <li><a href="http://codefans.net/soft/4376.shtml" target="_blank">jQuery相册播放插件</a></li>
      <li><a href="http://codefans.net/soft/4374.shtml" target="_blank">Ajax拖动分页插件</a></li>
      <li><a href="http://codefans.net/soft/4373.shtml" target="_blank">C#餐饮管理系统</a></li>
      <li><a href="http://codefans.net/soft/4387.shtml" target="_blank">BICQ 仿QQ聊天系统</a></li>
      <li><a href="http://codefans.net/soft/4387.shtml" target="_blank">BICQ 仿QQ聊天系统</a></li>
    </UL>
    <UL id=c3>
      <li><a href="/soft/1160.shtml" target="_blank">VC++实现超酷QQ界面</a></li>
      <li><a href="/soft/3477.shtml" target="_blank">基于C#同步套接字</a></li>
      <li><a href="/soft/4067.shtml" target="_blank">《网页制作完全手册》 chm</a></li>
      <li><a href="/soft/2144.shtml" target="_blank">VB调用模板进行打印的实例</a></li>
      <li><a href="/soft/1183.shtml" target="_blank">ASP.net报表设计源码包</a></li>
      <li><a href="/soft/1610.shtml" target="_blank">J2me开发环境的搭建教程</a></li>
      <li><a href="/soft/3182.shtml" target="_blank">《jQuery in Action》 源代码</a></li>
      <li><a href="/soft/3307.shtml" target="_blank">DCS PHP在线记账/记事本</a></li>
      <li><a href="/soft/2832.shtml" target="_blank">VB打印控件Listview示例</a></li>
      <li><a href="/soft/4321.shtml" target="_blank">仿支付宝CSS网站导航栏</a></li>
    </UL>
  </DIV>
</DIV>
<SCRIPT type=text/javascript> 
/** /**/ 
var myTitle = document.getElementById("mytit"); 
myTitle.innerHTML += myTitle.innerHTML; 
var lists = myTitle.getElementsByTagName("li"); 
var num = lists.length - 2; 
//alert(num) 
myTitle.style.width = (num+1) * 92;//计算标题长度 
var ele = document.getElementById("tit_l"); 
var w = ele.clientWidth; 
var n = 18; 
var t = 38;//数值越小速度越快 
var times = new Array(n); 
var k = 0; 
var l = 0; 
yahooo(0); 
function yahooo(s) 
{ 
if(k >= num && s > 0) 
{ 
ele.scrollLeft = w; 
k = 1; 
} 
if(k < 1 && s < 0) 
{ 
ele.scrollLeft = (num-1) * w; 
k = num-1; 
} 
k += s; 
var x = ele.scrollLeft; 
var d = k * w - x; 
for(i=0;i<n;i++) 
( 
function() 
{ 
if(times[i]) {clearTimeout(times[i])} ; 
var j = i; 
times[i] = setTimeout(function(){ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)));},(i+1)*t); 
} 
)(); 
} 
var imgs = document.getElementById("tit_r").getElementsByTagName("img"); 
///
var c1 = document.getElementById("c1"); 
var c2 = document.getElementById("c2"); 
var c3 = document.getElementById("c3"); 
imgs[0].onclick = function() 
{ 
yahooo(-1); 
if(k==0){c1.style.display = "block";c2.style.display = "none";c3.style.display = "none";} 
if(k==1){c1.style.display = "none";c2.style.display = "block";c3.style.display = "none";} 
if(k==2){c1.style.display = "none";c2.style.display = "none";c3.style.display = "block";} 
} 
imgs[1].onclick = function() 
{ 
yahooo(1); 
if(k==0 || k==3){c1.style.display = "block";c2.style.display = "none";c3.style.display = "none";} 
if(k==1 || k==4){c1.style.display = "none";c2.style.display = "block";c3.style.display = "none";} 
if(k==2){c1.style.display = "none";c2.style.display = "none";c3.style.display = "block";} 
} 
</SCRIPT>
</body>
</html>

列表、排行专用的灰、红滑动门菜单

专用于列表、排行的红灰色调的网页滑动门，灰色、红色的颜色搭配，视觉舒服。直接复制到你的网页中就可以用，非常方便。

<!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=utf-8" />
<title>滑动门-www.codefans.net</title>
<script type="text/javascript">
</script>
<style type="text/css">
/* www.codefans.net */
* {
	margin:0;
	padding:0;
	word-break:break-all;
}
body {
	background:#FFF;
	color:#333;
	font:12px/1.6em Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
	font-size:1em;
}
a {
	color:#333;
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}
ul, li {
	list-style:none;
}
fieldset, img {
	border:none;
}
/* Hotnews style */
#hotnews {
	width:300px;
	margin:100px;
}
#hotnews_caption {
	width:300px;
	overflow:hidden;
	border-bottom:3px solid #C2130E;
}
#hotnews_caption ul {
	float:right;
}
#hotnews_caption ul li {
	float:left;
	border-left:1px solid #FFF;
	width:50px;
	line-height:25px;
	text-align:center;
	cursor:pointer;
}
#hotnews_caption .normal {
	background:#CCC;
}
#hotnews_caption .current {
	background:#C2130E;
	color:#FFF;
}
#hotnews_content {
}
#hotnews_content .normal {
	display:none;
}
#hotnews_content .current {
	display:block;
}
#hotnews_content ul {
	padding:8px 0 0 5px;
}
#hotnews_content ul li a {
	font-size:14px;
}
</style>
<script type="text/javascript">
function secBoard(elementID,listName,n) {
 var elem = document.getElementById(elementID);
 var elemlist = elem.getElementsByTagName("li");
 for (var i=0; i<elemlist.length; i++) {
  elemlist[i].className = "normal";
  var m = i+1;
  document.getElementById(listName+"_"+m).className = "normal";
 }
  elemlist[n-1].className = "current";
  document.getElementById(listName+"_"+n).className = "current";
}
</script>
</head>
<body>
<div id="hotnews">
  <div id="hotnews_caption">
    <ul>
      <li class="current" onmousemove="secBoard('hotnews_caption','list',1);">首页</li>
      <li class="normal" onmousemove="secBoard('hotnews_caption','list',2);">排行</li>
      <li class="normal" onmousemove="secBoard('hotnews_caption','list',3);">最新</li>
      <li class="normal" onmousemove="secBoard('hotnews_caption','list',4);">热点</li>
    </ul>
  </div>
  <div id="hotnews_content">
    <div class="current" id="list_1">
      <ul>
        <li><a href="/soft/4489.shtml" target="_blank">淘特 AspCms v5.5 SP1</a></li>
        <li><a href="/soft/3091.shtml" target="_blank">C9 ASP静态文章系统 v2.0.1</a></li>
        <li><a href="/soft/3582.shtml" target="_blank">TacodEmp ASP企业网站系统 v1.3</a></li>
      </ul>
    </div>
    <div class="normal" id="list_2">
      <ul>
        <li><a href="/soft/4626.shtml" target="_blank">良精公司企业网站系统ASP开源版 v1.0</a></li>
        <li><a href="/soft/2605.shtml" target="_blank">露珠ASP个人站程序 v3.21</a></li>
        <li><a href="/soft/3158.shtml" target="_blank">最新ACCESS版纯真IP数据库附ASP查询程序</a></li>
        </a>
        </li>
      </ul>
    </div>
    <div class="normal" id="list_3">
      <ul>
        <li><a href="/soft/2221.shtml" target="_blank">愚人笔记ASP文章动态版 V4.0</a></li>
        <li><a href="/soft/3368.shtml" target="_blank">QvodCMS视频点播专家 ASP v2.2</a></li>
        <li><a href="/soft/2482.shtml" target="_blank">雷风HTML影视系统ASP版带采集 v1.1</a></li>
      </ul>
    </div>
    <div class="normal" id="list_4">
      <ul>
        <li><a href="/soft/1037.shtml" target="_blank">网趣ASP购物系统时尚版 v9.2</a></li>
        <li><a href="/soft/4548.shtml" target="_blank">QJblog ASP版多用户博客 v1.0</a></li>
        <li><a href="/soft/2141.shtml" target="_blank">Pcook CMS 泡客静态文章系统（带采集） v3.0</a></li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>