<!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" /> <meta name="auther" content="fq" /> <title>tab</title> <script type="text/javascript"> function addEvent(elem,type,fn){if(elem.nodeName==="A"&&type==="click"){elem.setAttribute("href","javascript:void(0)")};if(elem.addEventListener){elem.addEventListener(type,fn,false);return true;}else if(elem.attachEvent){elem['e'+type+fn]=fn;elem[type+fn]=function(){elem['e'+type+fn](window.event);} elem.attachEvent("on"+type,elem[type+fn]);return true;} return false;};function slide(o){var handle=o.handle,content=o.content,mode=o.mode||"moseover",myClass=o.current,speed=o.speed,fn=o.fn,flag=0,past,timer;for(var i=0;i<handle.length;i++){(function(i){addEvent(handle[i],mode,function(){clearTimeout(timer);show(i);});})(i);if(handle[i].className===myClass)past=i;} function show(flag){var i=flag;handle[past].className="";content[past].style.display="none";past=flag;handle[i].className=myClass;content[i].style.display="block";if(handle[i].nodeName==="A")handle[i].blur();(flag+1)==handle.length?flag=0:flag++;if(speed){timer=setTimeout(function(){show(flag)},speed);addEvent(content[i],"mouseover",function(){clearTimeout(timer)});addEvent(content[i],"mouseout",function(){clearTimeout(timer);timer=setTimeout(function(){show(flag)},speed)});};if(fn)fn();} if(speed)show(flag);}</script> <style> h2{ margin:0;} ul{ padding:0; margin:0;} .tab{ 400px; margin:30px auto 0; font-size:12px; color:#555; border:1px solid #ccc;} .tab h2{ 100%; overflow:hidden; font-size:12px; font-weight:normal; background:#f2f2f2;} .tab h2 span, .tab h2 a{ float:left; 50px; line-height:25px; background:#ddd; border-right:1px solid #ccc; border-bottom:1px solid #ccc; text-align:center; cursor:pointer;} .tab h2 .current{ background:#fff; font-weight:bold; border-bottom:1px solid #fff;} .tab ul{ padding:25px;} </style> </head> <body> <div style=" 80%; margin:20px auto; border:1px solid #ccc; background:#f2f2f2; padding:15px; font-size:14px; line-height:22px;"> <b>选项卡解说：</b><br /> 1、支持一个页面多次引用；<br /> 2、一次引用实现多次切换；<br /> 3、点击/滑过等切换方式自定义；<br /> 4、自动播放+鼠标动作切换；<br /> 5、自动播放时鼠标移向内容区域暂停播放；<br /> 6、切换完成后回调函数。<br /><br /> <b>函数引用说明：</b><br /> slide({handle:elems, content:elems, current:"current", mode:"click", delay:5000, fn:function(){...} });<br /><br /> 引用基本格式 slide({...}); 中间的“...”所代表的就是参数内容。<br /><br /> 参数说明：<br /> handle：表示选项卡分组名称的节点数组<br /> content：表示与分组名称对应的内容的节点数组<br /> current：表示当前分组名称的样式名称<br /> mode：表示切换方式，支持“click/mouseover/...”等鼠标事件<br /> delay：表示自动播放的间隔时间，有值则自动播放，单位毫秒<br /> fn：表示切换完成一次后的回调函数 </div> <div style="80%; margin:auto; text-align:left; font-size:12px;"> <b>引用示例一：</b> <p> // 鼠标滑过显示 一次引用，实现多个切换<br /> var slides = ["tab01", "tab02"];<br /> for(var i=0; i<slides.length; i++){<br /> var elemTit = document.getElementById(slides[i]).getElementsByTagName("h2")[0].getElementsByTagName("span");<br /> var elemCon = document.getElementById(slides[i]).getElementsByTagName("ul");<br /> slide({ handle:elemTit, content:elemCon, current:"current", mode:"mouseover" });<br /> }</p></div> <div class="tab" id="tab01"> <h2> <span class="current">标题0</span> <span>标题1</span> <span>标题2</span> <span>标题3</span> </h2> <ul>滑过显示0</ul> <ul style="display:none">滑过显示1</ul> <ul style="display:none">滑过显示2</ul> <ul style="display:none">滑过显示3</ul> </div> <div class="tab" id="tab02"> <h2> <span>标题0</span> <span>标题1</span> <span class="current">标题2</span> <span>标题3</span> </h2> <ul style="display:none">滑过显示0</ul> <ul style="display:none">滑过显示1</ul> <ul>滑过显示2</ul> <ul style="display:none">滑过显示3</ul> </div> <div style="80%; margin:auto; text-align:left; font-size:12px;"> <b>引用示例二：</b> <p>// 鼠标点击显示<br /> slide({ handle:document.getElementById("tab03").getElementsByTagName("h2")[0].getElementsByTagName("a"), content:document.getElementById("tab03").getElementsByTagName("ul"), current:"current", mode:"click" });</p></div> <div class="tab" id="tab03"> <h2> <a href="#">标题0</a> <a href="#" class="current">标题1</a> <a href="#">标题2</a> <a href="#">标题3</a> </h2> <ul style="display:none">点击显示0</ul> <ul>点击显示1</ul> <ul style="display:none">点击显示2</ul> <ul style="display:none">点击显示3</ul> </div> <div style="80%; margin:auto; text-align:left; font-size:12px;"> <b>引用示例三：</b> <p>// 自动播放<br /> slide({<br /> handle:document.getElementById("tab04").getElementsByTagName("h2")[0].getElementsByTagName("a"),<br /> content:document.getElementById("tab04").getElementsByTagName("ul"),<br /> current:"current",<br /> mode:"mouseover",<br /> speed:1000<br /> });</p></div> <div class="tab" id="tab04"> <h2> <a href="#" class="current">标题0</a> <a href="#">标题1</a> <a href="#">标题2</a> <a href="#">标题3</a> </h2> <ul>自动播放0</ul> <ul style="display:none">自动播放1</ul> <ul style="display:none">自动播放2</ul> <ul style="display:none">自动播放3</ul> </div> <div style="margin:50px auto 0; text-align:center; font-size:14px; font-weight:bold;"> 完整示例下载： <a href="http://www.imf7.com/code/tab/TAB.rar" target="_blank">完整版下载TAB.rar</a> <a href="http://www.imf7.com/code/tab/tab.full.rar" target="_blank">完整JS下载tab.full.rar</a> <a href="http://www.imf7.com/code/tab/tab.min.rar" target="_blank">压缩JS下载tab.min.rar</a> <br /><br /> 项目主页：<a href="http://www.imf7.com/code/tab/" target="_blank">http://www.imf7.com/code/tab/</a><br /> 博客介绍：<a href="http://www.imf7.com/archives/154" target="_blank">http://www.imf7.com/archives/154</a> </div> <script type="text/javascript"> // 鼠标滑过显示 一次引用，实现多个切换 var slides = ["tab01", "tab02"]; for(var i=0; i<slides.length; i++){ var elemTit = document.getElementById(slides[i]).getElementsByTagName("h2")[0].getElementsByTagName("span"); var elemCon = document.getElementById(slides[i]).getElementsByTagName("ul"); slide({ handle:elemTit, content:elemCon, current:"current", mode:"mouseover" }); } // 鼠标点击显示 slide({ handle:document.getElementById("tab03").getElementsByTagName("h2")[0].getElementsByTagName("a"), content:document.getElementById("tab03").getElementsByTagName("ul"), current:"current", mode:"click" }); // 自动播放 slide({ handle:document.getElementById("tab04").getElementsByTagName("h2")[0].getElementsByTagName("a"), content:document.getElementById("tab04").getElementsByTagName("ul"), current:"current", mode:"mouseover", speed:1000 }); // 如果您的页面引用了JQuery，那么这里的引用可以这样写 // slide({handle:$("#tab04 h2 a"), content:$("#tab04 ul"), current:"current", mode:"click"}); </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> <title> </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body,html{margin:10px;padding:0;font-size:12px;font-family:Arial;font:12px/1 Tahoma, Arial;} .fxTab{border:1px solid #999;400px;} .fxTab ul,.fxTab li{margin:0;padding:0;list-style:none;} .fxTab ul{padding:10px;border-bottom:1px solid #999;padding-bottom:0;background:#EFE0A5;overflow:hidden;_height:1%;} .fxTab li{border:1px solid #999;border-bottom:1px solid #999;padding:5px;float:left;display:inline;margin-right:2px;position:relative;bottom:-1px;cursor:pointer;background:#eee;} .fxTab li.hot{border-bottom:1px solid #fff;background:#fff;cursor:default;} .tab_content{margin:5px;white-space:nowrap;overflow:hidden;390px;} .tab_content div{display:-moz-inline-stack;display:inline-block;zoom:1;*display:inline;100%;overflow:hidden;white-space:auto;} .tab_content img{vertical-align:middle;} </style> </head> <body> <div class="fxTab" id="" > <ul id="tab_nav"><li class="hot">最新更新</li><li>VIP小说</li><li>新书更新</li></ul> <div style="clear:both"></div> <div class="tab_content" id="tab_content"> <div id=""><img src="http://gg.blueidea.com/2010/mianfeiwangzhan/homeNshop.gif" alt="" /></div> <div id=""><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="" /></div> <div id="">猎卡 第二卷 刺客联盟 第四十四章 烧钱之举 白斩堂04-15 22:51</div> </div> </div> </body> <script type="text/javascript"> //<![CDATA[ function fx(E) { var t=0,s=0,F=Function,qe=[].slice.call(arguments,1),hd,k,me=arguments.callee; var T={time:36,init:F,end:F,play:F,fx:F('l','return Math.pow(l,7)')}; for(k in T)$[k]=T[k];for(k in E)$[k]=E[k]; if(false===$.init())return F;hd = setInterval(each, 10);return clear; function $(f,t){return + f + (t - f) * s}; function each(){s = $.fx(t++/$.time);if(false===$.play(s)||s==1)clear()}; function clear(x) {if(false!==$.end(x)&&qe.length){me.apply(window,qe)};clearInterval(hd)} }; function onToggle(opts){ var ini={btns:[],bodys:[],init:function(){},on:function(){},hover:false,wait:0},prev,timer; for(var k in opts)ini[k]=opts[k]; var hz=ini.hover?ini.wait:0,type=ini.hover?"onmouseover":"onclick"; for(var i=0,l=ini.btns.length;i<l;i++){ (function (btn,i){ if(i==0){prev={btn:btn,body:ini.bodys[i],index:i};ini.init(prev)}; btn[type]=function (){ if(prev.btn===this)return; clearTimeout(timer); var $this=this,cur; timer=setTimeout(function (){ cur={btn:$this,body:ini.bodys[i],index:i}; ini.on(prev,cur);//user event prev=cur },hz); }; if(ini.hover) btn.onmouseout=function(){ clearTimeout(timer)} })(ini.btns[i],i) } }; onToggle({ btns:document.getElementById('tab_nav').getElementsByTagName('LI'), bodys:document.getElementById('tab_content').getElementsByTagName('div'), hover:true, on:function (a,b){ this.f&&this.f(); a.btn.className=''; b.btn.className='hot'; this.f=fx({ init:function (){ this.f=tab_content.scrollLeft; this.to=b.index*b.body.offsetWidth; }, play:function (){ tab_content.scrollLeft=this(this.f,this.to) } }) } }) //]]> </script> </html>