TAB选项卡定时自动切换,设计简洁的滑动门

　　烈火网(LieHuo.Net)网页特效：一个可以自动切换的选项卡，或者说是滑动门，本来这两个东西就相关不大，有兴趣的朋友研究一下，它除了自己播放每个选项卡内的内容外，也响应鼠标的动作，鼠标放上后即可响应变换内容，因主要想表现功能及代码，因此没有过多修饰，显得异常简洁。

　　看一下效果演示：

<title>自动切换的Tab选项卡 - Liehuo.net</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> <!--tabselect--> <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> <!--/tabselect--><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：广安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!