本文實例講述了jQuery實現仿騰訊迷你首頁選項卡效果。分享給大家供大家參考。具體如下：
這是一款基于jQuery實現的選項卡，清爽無修飾版，仿騰訊的迷你首頁。選項卡的前后可以有一個控件箭頭，點擊這兩個箭頭可控件選項卡向左、向右滾動，在有限的網頁空間內布局更多的內容成為可能，相信你會喜歡的。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/jquery-t-tencent-index-style-nav-codes/
具體代碼如下：
<!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><script type="text/javascript" src="jquery1.3.2.js"></script><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery選項卡</title><style type="text/css"><!--*{ margin:0; padding:0;}body{ font-size:12px;}ul,li{ list-style-type:none;}#tab{ width:500px; height:200px; margin:20px auto; overflow:hidden;}#tab .tab_title{ width:500px; height:22px; overflow:hidden;left:0; top:0; clear:both; overflow:hidden; position:relative;}#tab .tab_title .u{ width:465px; overflow:hidden; position:relative;}#tab .tab_title ul{ margin:0 5px; position:absolute; float:left; width:1392px;}#tab .tab_title div{ float:left;width:15px; height:20px; line-height:20px; cursor:pointer;}#tab .tab_title span.vright{top:0; right:5px; margin-left:2px;}#tab .tab_title span.vleft{top:0; left:0px; padding-left:5px;}#tab .tab_title li{ float:left; width:50px; height:20px; line-height:20px; text-align:center; background-color:#cccccc; margin-right:6px; border:1px #999999 solid; cursor:pointer;}#tab .tab_title li:hover{ background-color:#999999}#tab .tab_title li.selected{ background-color:#666666;}#tab .tab_content{ width:476px; height:156px; overflow:hidden; padding:10px; border:1px #CCCCCC solid;}#tab .tab_content div{ border:1px #999999 dotted; }#tab .tab_content div p{ line-height:1.5; text-indent:25px; color:#333333;}#tab .tab_content .none{ display:none;}#div1{ width:120px; height:15px; border:1px #CCCCCC solid; position:absolute; display:none; background:#CCCCCC; font-size:5px; padding:2px; color:#999999;}#div2{ width:120px; height:15px; border:1px #CCCCCC solid; position:absolute; display:none; background:#CCCCCC; font-size:5px; padding:2px; color:#999999;} --></style><script language="javascript"> $(function(){ var index = 0; $(".tab_title ul li").click(function(){ index = $(".tab_title ul li").index(this); $(this).addClass("selected").siblings().removeClass("selected"); $(".tab_content div").eq(index).show().siblings().hide(); }); var i = 8; //定義每個面板顯示8個菜單 var len = $(".u .scrol li").length; //獲得LI元素的個數 var page = 1; var maxpage = Math.ceil(len/i); var scrollWidth = $(".u").width(); var divbox = "<div id='div1' >已經到最后一個面板了</div>"; $("body").append(divbox); $(".vright").click(function(e){ if(!$(".u .scrol").is(":animated")){ if(page == maxpage ){ $(".u .scrol").stop(); $("#div1").css({ "top": (e.pageY + 20) +"px", "left": (e.pageX + 20) +"px", "opacity": "0.9" }).stop(true,false).fadeIn(800).fadeOut(800); }else{ $(".u .scrol").animate({left : "-=" + scrollWidth +"px"},2000); page++; } } }); $(".vleft").click(function(){ if(!$(".u .scrol").is(":animated")){ if(page == 1){ $(".u .scrol").stop(); }else{ $(".u .scrol").animate({left : "+=" + scrollWidth +"px"},2000); page--; } } }); });</script></head><body><div id="tab"> <div class="tab_title"> <div class="vleft"><strong><<</strong></div> <div class="u"> <ul class="scrol"> <li class="selected">選項一</li> <li>選項二</li> <li>選項三</li> <li>選項四</li> <li>選項五</li> <li>選項六</li> <li>選項七</li> <li>選項八</li> <li>選項九</li> <li>選項十</li> <li>選項11</li> <li>選項12</li> <li>選項13</li> <li>選項14</li> <li>選項15</li> <li>選項16</li> <li>選項17</li> <li>選項18</li> <li>選項19</li> <li>選項20</li> <li>選項21</li> <li>選項22</li> <li>選項23</li> <li>選項24</li> </ul> </div> <div class="vright"><strong>>></strong></div> </div> <div class="tab_content"> <div> <p>1傳說中的ubuntu火狐瀏覽器，感覺速度不是很理想?？粗鴘盤燈狂閃，還真擔心這個獎品u盤能撐多久。事實證明離開windows和Mac OS X ，童鞋還是可以從pc發圍脖的。哈哈。</p> </div> <div class="none"> <p>2不知道那個暖寶寶有沒有用。這幾天腳有點痛了。天冷。剛剛看暖寶寶團購的人超級多多。呵呵?。?lt;/p> </div> <div class="none"> <p>3忙完一陣。今天參觀蒙克博物館、諾貝爾和平中心和當代藝術博物館。學習了一下北歐的歷史，它們幾個國家的愛和恩怨。。</p> </div> <div class="none"> <p>4第一最好不相見，如此便可不相戀。第二最好不相知，如此便可不相思。 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相憶。 第五最好不相愛，免教生死作相思。</p> </div> <div class="none"> <p>5溫馨提示1：參加投票，同時正確參與競猜，才有機會贏得獎品哦！ 溫馨提示2：競猜結果請統一發布在本活動的評論中哈！ 溫性提示3：一個ID只進行一次競猜，一次最多可以猜三位明星哈！若出現一個ID多次競猜或一次競猜超過三位的情況，均視為無效哦！</p> </div> <div class="none"> <p>6關于上海起火這檔事兒，我做個小小的提醒。11月15日，就是11月9日后的一周。11月9日是什么日子，中國的消防日啊。我不知道，消防日后一周內發生的惡性消防事件，讓消防局怎么解釋？開發商怎么解釋？</p> </div> <div class="none"> <p>7 11月17日周三論道話題：熟人多朋友少，是什么讓友誼變了味？超過8成人認為“幾乎天天有飯局，卻發現自己依然很孤獨。”有近一半人“手機通訊錄、QQ好友”有50到200個認識的人，但大部分認為真正的朋友沒有幾個。你是否也碰到過孤單寂寞時拿起電話又不知打給誰的尷尬。。</p> </div> <div class="none"> <p>8第一最好不相見，如此便可不相戀。第二最好不相知，如此便可不相思。 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相憶。 第五最好不相愛，免教生死作相思。</p> </div> <div class="none"> <p>9傳說中的ubuntu火狐瀏覽器，感覺速度不是很理想?？粗鴘盤燈狂閃，還真擔心這個獎品u盤能撐多久。事實證明離開windows和Mac OS X ，童鞋還是可以從pc發圍脖的。哈哈。</p> </div> <div class="none"> <p>10今晚在男生宿舍打邊爐。。呵呵。好好吃啊，肯定又胖兩斤了 。</p> </div> <div class="none"> <p>11我很驚訝，昨天與今天，大多外地電視媒體選擇打退堂鼓，而山東衛視的記者今天下午來電，說已到上海。我說"好 那我等你"，下飛機，她先去了現場，20:30到了我們臺。。。很莫名，我非常感興趣，他們是怎么吃這塊牛肉的。。</p> </div> <div class="none"> <p>12剛剛幫小色B寫完我點解崇拜lollipop以及他們對我的影響之后，突然發現自己他們真的讓我好迷戀啊，他們的努力，認真……突然好想他們能回到從前那樣在一起，雖然他們現在只是公司分開了，但是每次活動不再一起出現的時候，心里總是有一種不怎么好的滋味，因為他們才真正是Lollipop棒棒堂嘛！50秒前。</p> </div> <div class="none"> <p>13哎呀呀，我們的牟導已經成微薄控叻， 臨放學了還不忘問哀家，今晚上“微”嗎。。</p> </div> <div class="none"> <p>14第一最好不相見，如此便可不相戀。第二最好不相知，如此便可不相思。 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相憶。 第五最好不相愛，免教生死作相思。</p> </div> <div class="none"> <p>15不知道那個暖寶寶有沒有用。這幾天腳有點痛了。天冷。剛剛看暖寶寶團購的人超級多多。呵呵！。</p> </div> <div class="none"> <p>16第一最好不相見，如此便可不相戀。第二最好不相知，如此便可不相思。 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相憶。 第五最好不相愛，免教生死作相思。</p> </div> <div class="none"> <p>17第一最好不相見，如此便可不相戀。第二最好不相知，如此便可不相思。 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相憶。 第五最好不相愛， 不相對，如此便可不相會。 第七最好不相誤，如此便可不相負。第八最好不相許，如此便可不相續。 第九最好不相依，如此便可不相偎。第十最好不相遇，如此便可不相聚。 相會。 第七最好不相誤，如此便可不相負。第八最好不相許，如此便可不相續。但曾相見便相知，相見何如不見時。安得與君相訣絕，免教生死作相思。</p> </div> <div class="none"> <p>18第一最好不相見，如此便可不相戀。第二最好不相知，如此便可不相思。 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相憶。 第五最好不相愛，免教生死作相思。</p> </div> <div class="none"> <p>19第一最好不相見，如此便可不相戀。第二最好不相知，如此便可不相思。 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相憶。 第五最好不相愛， 不相對，如此便可不相會。 第七最好不相誤，如此便可不相負。第八最好不相許，如此便可不相續。 第九最好不相依，如此便可不相偎。第十最好不相遇，如此便可不相聚。 相會。 第七最好不相誤，如此便可不相負。第八最好不相許，如此便可不相續。但曾相見便相知，相見何如不見時。安得與君相訣絕，免教生死作相思。</p> </div> <div class="none"> <p>20第一最好不相見，如此便可不相戀。第二最好不相知，如此便可不相思。 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相憶。 第五最好不相愛，免教生死作相思。</p> </div> <div class="none"> <p>21回到了溫馨的房間本應該很開心的，可我聽著音樂卻是心事重重的。50秒前。</p> </div> <div class="none"> <p>22不要用爾康刷屏我受不了了再刷屏俺就再不用電腦上了我以后都用受機…………</p> </div> <div class="none"> <p>23忙完一陣。今天參觀蒙克博物館、諾貝爾和平中心和當代藝術博物館。學習了一下北歐的歷史，它們幾個國家的愛和恩怨。。</p> </div> <div class="none"> <p>24第一最好不相見，如此便可不相戀。第二最好不相知，如此便可不相思。 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相憶。 第五最好不相愛，免教生死作相思。</p> </div> </div></div><div id="js" align="center">刷新一下頁面，點擊左右箭頭 可以滾動菜單 當滾動到最后一個面板時 在鼠標的右下角會提示已經到最后一個面板了。</div></body></html>希望本文所述對大家的jQuery程序設計有所幫助。
新聞熱點
疑難解答
