一個(gè)自動(dòng)切換的Tab選項(xiàng)卡(滑動(dòng)門)_菜單導(dǎo)航特效

一個(gè)可以自動(dòng)切換的選項(xiàng)卡，或者說是滑動(dòng)門，本來(lái)這兩個(gè)東西就相關(guān)不大，有興趣的朋友研究一下，它除了自己播放每個(gè)選項(xiàng)卡內(nèi)的內(nèi)容外，也響應(yīng)鼠標(biāo)的動(dòng)作，鼠標(biāo)放上后即可響應(yīng)變換內(nèi)容，因主要想表現(xiàn)功能及代碼，因此沒有過多修飾，顯得異常簡(jiǎn)潔。

<title>自動(dòng)切換的Tab選項(xiàng)卡</title>
<style>
OL LI {
	MARGIN: 8px
}
#con {
	FONT-SIZE: 12px; MARGIN-RIGHT: 2px; WIDTH: 480px
}
#tags {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px 0px; WIDTH: 450px; PADDING-TOP: 0px; HEIGHT: 23px
}
#tags LI {
	FLOAT: left; MARGIN-RIGHT: 1px; LIST-STYLE-TYPE: none; HEIGHT: 23px
}
#tags LI A {
	PADDING-RIGHT: 10px; PADDING-LEFT: 10px; 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: #ddd 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #ddd 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: #ddd 1px solid; PADDING-TOP: 1px; BORDER-BOTTOM: #ddd 1px solid;
}
.tagContent {
	PADDING-RIGHT: 2px; DISPLAY: none; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; WIDTH: 480px; PADDING-TOP: 5px; HEIGHT: 210px
}
#tagContent DIV.selectTag {
	DISPLAY: block
}
#tagContent li {
  float: left;
  padding-left:1px;
  padding-bottom:7px;
}
#tagContent li span{
  float: right;
  color:#ccc;
  font-size:10px;
}
/*tagContent Style*/
</style>
        
        <div id="big" onmouseover="zhuan()" onmouseout="jixu()" class="column480" style="padding-left:3px;">
          <DIV id="con">
            <UL id="tags">
                <LI class="selectTag"><A onmouseover="selectTag('tagContent0',this)" href="javascript:void(0)">ASP源代碼</A> </LI>
                <LI><A onmouseover="selectTag('tagContent1',this)" href="javascript:void(0)">PHp源碼</A></LI>
                <LI><A onmouseover="selectTag('tagContent2',this)" href="javascript:void(0)">Ajax源代碼</A></LI>
            </UL>
          <DIV id="tagContent">
              <DIV class="tagContent selectTag" id="tagContent0"><li>ASP源代碼</li></DIV>
              <DIV class="tagContent" id="tagContent1"><li>PHp源碼</li></DIV>
              <DIV class="tagContent" id="tagContent2"><li>Ajax源代碼</li></DIV>
          </DIV>
		</DIV>
        <SCRIPT type="text/javascript">
		var obig=document.getElementById("big");
        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";
        }
	var x=0;
	function scrollTag(){
	var tags=document.getElementById("tags").getElementsByTagName("a");
		if(x<2){x=x+1}
		else
		x=0;
          var tag = document.getElementById("tags").getElementsByTagName("li");
          var taglength = tag.length;
          for(i=0; i<taglength; i++){
            tag[i].className = "";
          }
	  tags[x].parentNode.className = "selectTag";
	  for(i=0; j=document.getElementById("tagContent"+i);i++){
		 j.style.display="none";
		  }
		  document.getElementById("tagContent"+x).style.display="block";
		}
		var scrolll=setInterval(scrollTag,2000);
		function zhuan(){
		clearInterval(scrolll);
		}
		function jixu(){
		scrolll=setInterval(scrollTag,2000);
		}
        </SCRIPT>
        </div>

所屬頻道：菜單導(dǎo)航特效/更新時(shí)間：2011-02-24

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)菜單導(dǎo)航特效：

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些

相關(guān)鏈接：
復(fù)制本頁(yè)鏈接| 搜索一個(gè)自動(dòng)切換的Tab選項(xiàng)卡(滑動(dòng)門)
特效說明：
菜單導(dǎo)航模板-一個(gè)自動(dòng)切換的Tab選項(xiàng)卡(滑動(dòng)門)。

日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

一個(gè)自動(dòng)切換的Tab選項(xiàng)卡(滑動(dòng)門)_菜單導(dǎo)航特效

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些