html 滚动选项卡组件,jQuery实现选项卡Tab菜单滚动

jQuery实现选项卡Tab菜单滚动_网页代码站(www.webdm.cn)

body {

font-family:arial;

font-size:12px;

}

a {

color:#333;

text-decoration:none;

display:block;

}

a:hover {

color:#888;

text-decoration:none;

}

#moving_tab {

overflow:hidden;

width:300px;

position:relative

border:1px solid #ccc;

margin:0 auto;

}

#moving_tab .tabs {

position:relative;

height:30px;

padding-top:5px;

cursor:default;

}

#moving_tab .tabs .item {

position:relative;

z-index:10;

float:left;

display:block;

width:150px;

text-align:center;

font-size:14px;

font-weight:700;

}

#moving_tab .tabs .lava {

position:absolute;

top:0; left:0;

z-index:0;

width:150px;

height:30px;

background:#abe3eb;

}

#moving_tab .content {

position:relative;

overflow:hidden;

background:#abe3eb;

border-top:1px solid #d9fafa;

}

#moving_tab .panel {

position:relative;

width:600px;

}

#moving_tab .panel ul {

float:left;

width:300px;

padding:0;

margin:0;

list-style:none;

}

#moving_tab .panel ul li {

padding:5px 0 5px 10px;

border-bottom:1px dotted #fff;

}

$(document).ready(function () {

$('.lava').css({left:$('span.item:first').position()['left']});

$('.item').mouseover(function () {

$('.lava').stop().animate({left:$(this).position()['left']}, {duration:200});

$('.panel').stop().animate({left:$(this).position()['left'] * (-2)}, {duration:200});

});

});

Popular Posts

Recent Posts

• Panel 01 Item 01
• Panel 01 Item 02
• Panel 01 Item 03
• Panel 01 Item 04
• Panel 01 Item 05

• Panel 02 Item 01
• Panel 02 Item 02
• Panel 02 Item 03
• Panel 02 Item 04
• Panel 02 Item 05

网页代码站 - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！