本文實例講述了jQuery實現MSN中文網滑動Tab菜單效果代碼。分享給大家供大家參考。具體如下：
這是一款jQuery實現Msn中文網的滑動滑動門代碼，利用jQuery實現的效果，代碼很巧妙，就是利用一個絕對定位的層來實現移動效果，但是體驗度大幅提升了。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/jquery-f-msn-tab-menu-style-codes/
具體代碼如下：
<!DOCTYPE html><html><head><meta charset="gb2312" /><meta http-equiv="Refresh" content="3600" /><title>MSN中文網：時尚生活 白領門戶</title><style>body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{ margin: 0; padding: 0;}ol,ul{ list-style: none;}.clearfix:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}.clearfix{ display: inline-block;}/* Hides from IE-mac /*/* html .clearfix{ height: 1%;}.clearfix{ display: block;}/* End hide from IE-mac */body{ font-size: 12px; font-family: "Microsoft Yahei" ,Tahoma, "SimSun"; color: #333; background: #fff; line-height: 1.5;}.main_l{ width: 513px; position: relative; float: left;}.main_title{ height: 28px; overflow: hidden; background: url(images/s3.png) 0 0 no-repeat; float: left;}.main_title ul{ font-size: 14px;}.main_title ul li{ height: 23px; line-height: 23px; padding-left: 16px; padding-right: 16px; padding-top: 1px; background: #f1f1f1; border-top: #fff 3px solid; border-left: #fff 1px solid; border-right: #fff 1px solid; float: left;}.main_title ul .on{ height: 22px; line-height: 22px; padding-left: 16px; padding-right: 16px; background: #fff; border-top: #009ad9 4px solid; border-left: #009ad9 1px solid; border-right: #009ad9 1px solid; border-bottom: #fff 1px solid;}.main_title ul .on a{ font-weight: 700;}.main_title span{ line-height: 24px; padding-top: 4px; padding-right: 10px; float: right;}.main_l .main_title{ width: 513px; overflow: hidden;}.main_l .main_content{ width: 513px;}.main_l .main_content .main_box{ width: 339px; overflow: hidden; float: left;}.main_l .main_content .main_box .list{ font-size: 14px; line-height: 26px;}.main_l .main_content .main_box .list ul{ padding: 8px 0; border-bottom: #e1e1e1 1px solid; width: 339px; overflow: hidden;}.main_l .main_content .main_box .list ul li{ padding-left: 25px; background: url(images/s3.png) 3px -300px no-repeat; width: 600px;}.main_l .main_content .main_box .list ul .v{ background: url(images/s3.png) 3px -330px no-repeat;}.main_l .main_content .main_box .list ul .top{ background: none; padding-left: 0; text-align: center; font-size: 14px; font-weight: 700; width: 339px;}.tab div.t.none{ display: none;}.tab .main_title ul.fx li{ background-color: transparent;}.tab .main_title ul.fx li, .tab .main_title ul.fx li.on{ border-top: 0; margin-top: 3px; padding-top: 0;}.tab .main_title ul.fx li.on{ border-left-color: transparent; border-right-color: transparent; border-bottom-width: 0;}.tab .main_title ul.fx{ z-index: 20; position: relative;}.tab .main_title div.animate{ height: 23px; position: absolute; top: 0; border-top: #009ad9 4px solid; border-left: #009ad9 1px solid; border-right: #009ad9 1px solid; border-bottom: #fff 1px solid; background-color: #fff;}</style><script src="jquery-1.6.2.min.js"></script><script>var msn = msn || {};msn.hp = msn.hp || {};msn.hp.tab = { t: null, delayTime: 150, fx: true, tab: function(b) { $(b).siblings().removeClass("on"); $(b).addClass("on"); var c = $(b).parents(".tab").find("div.t"); var a = c.eq($(b).index()); c.addClass("none"); a.removeClass("none"); if (this.fx) { if ($(b).parent().hasClass("nofx")) { return } $(b).parent().siblings(".animate").width($(b).outerWidth() - 2).animate({ left: $(b).position().left }, "slow") } }, delayTab: function(b, a) { clearTimeout(b.t); this.t = setTimeout(function() { b.tab(a) }, this.delayTime) }, init: function() { var a = this; a.animate(); if (window.Touch) { $(".tab .main_title>ul>li[class!='on']>a").click(function() { return false }) } $(".tab .main_title>ul>li,.tab>ul.hotread_menu>li").hover(function() { a.delayTab(a, this) }, function() { clearTimeout(a.t) }) }, animate: function() { if (!this.fx) { return } $(".tab .main_title>ul").each(function() { if (!$(this).hasClass("nofx")) { $(this).addClass("fx") } }); $(".tab .main_title").each(function(a, b) { if ($(this).find("ul").hasClass("nofx")) { return } $(b).append("<div class='animate' ></div>"); $(b).find(".animate").width($(b).find("ul>li.on").outerWidth() - 2).css("left", $(b).find("ul>li.on").position().left) }) }};$(document).ready(function() { var a = msn.hp; a.tab.init();});</script></style></head><body><div class="clearfix"> <div class="main_l tab"> <div class="main_title"> <ul class="fx"> <li class="">Tab1</li> <li><a href="#">Tab2</a></li> <li><a href="#">Tab3</a></li> <li class="on"><a href="#">Tab4</a></li> </ul> <span><a href="#"></a>更多>> </span> <div class="animate" style="width: 60px; left: 186px;"></div><!--這是移動的關鍵--> </div> <div class="main_content clearfix"> <div class="main_box t none"> <div class="list"> <ul> <li class="top"><a href="#">雙色球井噴36注498萬</a> </li> <li><a href="#">停電促彩民中500萬</a> </li> <li><a href="#">白領講述坑爹的理賠經歷</a> </li> <li><a href="#">年入13萬怎規劃</a> </li> <li><a href="#">鉑金遇冷升值潛力超黃金</a> </li> <li><a href="#">投資鉑金正當時</a> </li> <li><a href="#">打敗巴菲特10方法：先還清你信用卡欠款</a> </li> <li><a href="#">中國股市越生越窮越窮越生</a> </li> <li><a href="#">熊貓幣更來菜</a> </li> </ul> </div> </div> <div class="main_box t none"> <div class="list"> <ul> <li class="top"><a href="#">外媒稱奢侈品炫富割裂中國社會收入現鴻溝</a> </li> <li><a href="#">京新盤價下調有限</a> </li> <li><a href="#">住宅周簽約同比降七成</a> </li> <li><a href="#">基金抱團表現低迷</a> </li> <li><a href="#">重倉股你加我減起內訌</a> </li> <li><a href="#">李旭利老鼠倉資金過億</a> </li> <li><a href="#">昔日私募巨星被拘</a> </li> <li><a href="#">傳統封基全線下挫</a> </li> <li><a href="#">基金經理熱望11月曙光</a> </li> <li><a href="#">福布斯統計:中國四百名富豪身家近三萬億</a> </li> <li><a href="#">電銷保險騷擾再現新變種</a> </li> <li><a href="#">車貸成雞肋喊停</a> </li> <li><a href="#">部分銀行違規營銷信用卡</a> <a href="#">銀行千億投理財</a> </li> <li><a href="#">債市長期投資機會來臨</a> <a href="#">或將率先迎來轉機</a> </li> <li><a href="#">短期流動性仍偏緊</a> <a href="#">密切關注投資通脹數據</a> </li> </ul> </div> </div> <div class="main_box t none"> <div class="list"> <ul> <li class="top"><a href="#">住房公積金面臨尷尬:買房遠不夠治病又違規</a> </li> <li><a href="#">房租比房價更傷人房租暴漲的十大后果</a> </li> <li><a href="#">郎咸平發危言樓市進入高風險低收入時代</a> </li> <li><a href="#">四環外低價房33萬</a> <a href="#">2.1萬住西四環五棵松</a> </li> <li><a href="#">金九銀十慘淡開局降51萬特價房殺出重圍</a> </li> <li><a href="#">迪拜塔里的奢侈酒店全球最奢侈酒店大PK</a> </li> <li><a href="#">全球生活成本最低十城市中國無城市上榜</a> </li> <li><a href="#">與親密愛人沐浴看讓男女瘋狂的情趣浴室</a> </li> <li><a href="#">高端住宅成“寵兒”終極置業大推薦</a> </li> <li><a href="#">上師大“雙優”房兩居整租限量放送</a> </li> </ul> </div> </div> <div class="main_box t"> <div class="list"> <ul> <li class="top"><a href="#">最適合80后的三套婚房案例簡約溫馨裝修</a> </li> <li><a href="#">小女人裝136平4室2廳2衛絕美氣質家</a> </li> <li><a href="#">10萬網友推崇的60套迷人簡約樣板間</a> </li> <li><a href="#">42圖記錄三層復式美宅裝修歷程(組圖)</a> </li> <li><a href="#">剩女自裝90平混搭風格三居室(組圖)</a> </li> <li><a href="#">六萬將60平舊房改成2室2廳豪華公寓</a> </li> <li><a href="#">96平二手房變簡約北歐風情三口之家</a> </li> <li><a href="#">網友曬89平米二室二廳浪漫愜意婚房</a> </li> <li><a href="#">一室二廳的溫馨二人世界很紅火(圖)</a> </li> <li><a href="#">85后小媳婦裝92平米簡約奢華三居</a> </li> </ul> </div> </div> </div> </div></div></body></html>希望本文所述對大家的jQuery程序設計有所幫助。
新聞熱點
疑難解答
