jQuery實(shí)現(xiàn)MSN中文網(wǎng)滑動(dòng)Tab菜單效果代碼
更新時(shí)間：2015年09月09日 12:29:15 作者：企鵝
這篇文章主要介紹了jQuery實(shí)現(xiàn)MSN中文網(wǎng)滑動(dòng)Tab菜單效果代碼,基于jQuery鼠標(biāo)事件實(shí)現(xiàn)頁(yè)面元素屬性動(dòng)態(tài)切換的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)MSN中文網(wǎng)滑動(dòng)Tab菜單效果代碼。分享給大家供大家參考。具體如下：
這是一款jQuery實(shí)現(xiàn)Msn中文網(wǎng)的滑動(dòng)滑動(dòng)門代碼，利用jQuery實(shí)現(xiàn)的效果，代碼很巧妙，就是利用一個(gè)絕對(duì)定位的層來(lái)實(shí)現(xiàn)移動(dòng)效果，但是體驗(yàn)度大幅提升了。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/jquery-f-msn-tab-menu-style-codes/
具體代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<meta http-equiv="Refresh" content="3600" />
<title>MSN中文網(wǎng)：時(shí)尚生活 白領(lǐng)門戶</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><!--這是移動(dòng)的關(guān)鍵-->
</div>
<div class="main_content clearfix">
<div class="main_box t none">
<div class="list">
<ul>
<li class="top"><a href="#">雙色球井噴36注498萬(wàn)</a> </li>
<li><a href="#">停電促彩民中500萬(wàn)</a> </li>
<li><a href="#">白領(lǐng)講述坑爹的理賠經(jīng)歷</a> </li>
<li><a href="#">年入13萬(wàn)怎規(guī)劃</a> </li>
<li><a href="#">鉑金遇冷升值潛力超黃金</a> </li>
<li><a href="#">投資鉑金正當(dāng)時(shí)</a> </li>
<li><a href="#">打敗巴菲特10方法：先還清你信用卡欠款</a> </li>
<li><a href="#">中國(guó)股市越生越窮越窮越生</a> </li>
<li><a href="#">熊貓幣更來(lái)菜</a> </li>
</ul>
</div>
</div>
<div class="main_box t none">
<div class="list">
<ul>
<li class="top"><a href="#">外媒稱奢侈品炫富割裂中國(guó)社會(huì)收入現(xiàn)鴻溝</a> </li>
<li><a href="#">京新盤價(jià)下調(diào)有限</a> </li>
<li><a href="#">住宅周簽約同比降七成</a> </li>
<li><a href="#">基金抱團(tuán)表現(xiàn)低迷</a> </li>
<li><a href="#">重倉(cāng)股你加我減起內(nèi)訌</a> </li>
<li><a href="#">李旭利老鼠倉(cāng)資金過(guò)億</a> </li>
<li><a href="#">昔日私募巨星被拘</a> </li>
<li><a href="#">傳統(tǒng)封基全線下挫</a> </li>
<li><a href="#">基金經(jīng)理熱望11月曙光</a> </li>
<li><a href="#">福布斯統(tǒng)計(jì):中國(guó)四百名富豪身家近三萬(wàn)億</a> </li>
<li><a href="#">電銷保險(xiǎn)騷擾再現(xiàn)新變種</a> </li>
<li><a href="#">車貸成雞肋喊停</a> </li>
<li><a href="#">部分銀行違規(guī)營(yíng)銷信用卡</a> <a href="#">銀行千億投理財(cái)</a> </li>
<li><a href="#">債市長(zhǎng)期投資機(jī)會(huì)來(lái)臨</a> <a href="#">或?qū)⒙氏扔瓉?lái)轉(zhuǎn)機(jī)</a> </li>
<li><a href="#">短期流動(dòng)性仍偏緊</a> <a href="#">密切關(guān)注投資通脹數(shù)據(jù)</a> </li>
</ul>
</div>
</div>
<div class="main_box t none">
<div class="list">
<ul>
<li class="top"><a href="#">住房公積金面臨尷尬:買房遠(yuǎn)不夠治病又違規(guī)</a> </li>
<li><a href="#">房租比房?jī)r(jià)更傷人房租暴漲的十大后果</a> </li>
<li><a href="#">郎咸平發(fā)危言樓市進(jìn)入高風(fēng)險(xiǎn)低收入時(shí)代</a> </li>
<li><a href="#">四環(huán)外低價(jià)房33萬(wàn)</a> <a href="#">2.1萬(wàn)住西四環(huán)五棵松</a> </li>
<li><a href="#">金九銀十慘淡開局降51萬(wàn)特價(jià)房殺出重圍</a> </li>
<li><a href="#">迪拜塔里的奢侈酒店全球最奢侈酒店大PK</a> </li>
<li><a href="#">全球生活成本最低十城市中國(guó)無(wú)城市上榜</a> </li>
<li><a href="#">與親密愛(ài)人沐浴看讓男女瘋狂的情趣浴室</a> </li>
<li><a href="#">高端住宅成“寵兒”終極置業(yè)大推薦</a> </li>
<li><a href="#">上師大“雙優(yōu)”房?jī)删诱庀蘖糠潘?lt;/a> </li>
</ul>
</div>
</div>
<div class="main_box t">
<div class="list">
<ul>
<li class="top"><a href="#">最適合80后的三套婚房案例簡(jiǎn)約溫馨裝修</a> </li>
<li><a href="#">小女人裝136平4室2廳2衛(wèi)絕美氣質(zhì)家</a> </li>
<li><a href="#">10萬(wàn)網(wǎng)友推崇的60套迷人簡(jiǎn)約樣板間</a> </li>
<li><a href="#">42圖記錄三層復(fù)式美宅裝修歷程(組圖)</a> </li>
<li><a href="#">剩女自裝90平混搭風(fēng)格三居室(組圖)</a> </li>
<li><a href="#">六萬(wàn)將60平舊房改成2室2廳豪華公寓</a> </li>
<li><a href="#">96平二手房變簡(jiǎn)約北歐風(fēng)情三口之家</a> </li>
<li><a href="#">網(wǎng)友曬89平米二室二廳浪漫愜意婚房</a> </li>
<li><a href="#">一室二廳的溫馨二人世界很紅火(圖)</a> </li>
<li><a href="#">85后小媳婦裝92平米簡(jiǎn)約奢華三居</a> </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)的經(jīng)典滑動(dòng)門效果
- jQuery實(shí)現(xiàn)可用于博客的動(dòng)態(tài)滑動(dòng)菜單完整實(shí)例
- jquery實(shí)現(xiàn)仿Flash的橫向滑動(dòng)菜單效果代碼
- 基于jQuery滑動(dòng)桿實(shí)現(xiàn)購(gòu)買日期選擇效果
- jQuery實(shí)現(xiàn)的Tab滑動(dòng)選項(xiàng)卡及圖片切換(多種效果)小結(jié)
- jquery實(shí)現(xiàn)最簡(jiǎn)單的滑動(dòng)菜單效果代碼
- jQuery實(shí)現(xiàn)自動(dòng)切換播放的經(jīng)典滑動(dòng)門效果
- jquery實(shí)現(xiàn)浮動(dòng)在網(wǎng)頁(yè)右下角的彩票開獎(jiǎng)公告窗口代碼
- jQuery實(shí)現(xiàn)的Div窗口震動(dòng)效果實(shí)例
- jQuery實(shí)現(xiàn)仿微軟首頁(yè)感應(yīng)鼠標(biāo)變化滑動(dòng)窗口效果
相關(guān)文章
jQuery使用post方法提交數(shù)據(jù)實(shí)例
這篇文章主要介紹了jQuery使用post方法提交數(shù)據(jù),實(shí)例分析了jQuery中post方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
jQuery實(shí)現(xiàn)動(dòng)態(tài)添加標(biāo)簽事件
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)添加標(biāo)簽事件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Jquery 數(shù)據(jù)選擇插件Pickerbox使用介紹
目前市面上很少見或幾乎沒(méi)有這數(shù)據(jù)(對(duì)象)選擇插件.比如,點(diǎn)擊input , select 元素時(shí)彈出div(窗口),載入數(shù)據(jù)讓用戶選擇數(shù)據(jù),選擇后在填充回對(duì)應(yīng)的元素.2012-08-08
JQuery中attr屬性和jQuery.data()學(xué)習(xí)筆記【必看】
下面小編就為大家?guī)?lái)一篇JQuery中attr屬性和jQuery.data()學(xué)習(xí)筆記【必看】。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧2016-05-05
JavaScript 學(xué)習(xí)筆記之一jQuery寫法圖片等比縮放以及預(yù)加載
以前對(duì)于JavaScript總是在用到的時(shí)候在頁(yè)面上寫幾個(gè)函數(shù)，基本沒(méi)考慮到函數(shù)的封裝與重用，最近有個(gè)項(xiàng)目可能對(duì)于這方面要求有點(diǎn)高，所以就研究了下類似jQuery的封裝2012-06-06
jquery學(xué)習(xí)筆記 用jquery實(shí)現(xiàn)無(wú)刷新登錄
為了防止以后好久不用生疏，在這里記下，供剛開始學(xué)習(xí)jquery的童鞋們借鑒，我也是剛開始學(xué)jquery，有什么寫的不對(duì)的地方，還請(qǐng)大家指出錯(cuò)誤，共同進(jìn)步。2011-08-08
本文給大家簡(jiǎn)單介紹了jQuery的核心函數(shù)，以及詳細(xì)介紹了7種重載方法中的3種，十分的實(shí)用，有需要的小伙伴可以參考下。2015-06-06
jquery讓返回的內(nèi)容顯示在特定div里(代碼少而精悍)
之前寫過(guò)ajax讓返回的內(nèi)容顯示在特定div里最近在看jquery，所以又用jquery重新寫了個(gè),需要的朋友可以參考下2014-06-06
基于jquery的動(dòng)畫效果代碼，挺有意思的，需要的朋友可以參考下2012-07-07
jQuery開源組件BootstrapValidator使用詳解
這篇文章主要為大家詳細(xì)介紹了jQuery開源組件BootstrapValidator的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06