jQuery实现MSN中文网滑动Tab菜单效果代码
本文实例讲述了jQuery实现MSN中文网滑动Tab菜单效果代码。分享给大家供大家参考。具体如下：
这是一款jQuery实现Msn中文网的滑动滑动门代码，利用jQuery实现的效果，代码很巧妙，就是利用一个绝对定位的层来实现移动效果，但是体验度大幅提升了。
运行效果截图如下：
在线演示地址如下：
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中文网：时尚生活 白领门户</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程序设计有所帮助。
