本文实例讲述了jQuery实现Tab菜单滚动切换的方法。分享给大家供大家参考。具体如下：
这是一款jQuery实现让你的Tab菜单滚动的代码,先运行一下看看效果咋样?是不是超不错,让你的网页变得灵动起来,不再静止,学习jquery的朋友也可作为范例来参考吧.
运行效果截图如下：
在线演示地址如下：
具体代码如下：
/p>
"/TR/html4/strict.dtd">
jQuery 让你的Tab菜单滚动的代码
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 01Panel 01 Item 02Panel 01 Item 03Panel 01 Item 04Panel 01 Item 05Panel 02 Item 01Panel 02 Item 02Panel 02 Item 03Panel 02 Item 04Panel 02 Item 05
希望本文所述对大家的jQuery程序设计有所帮助。
如果觉得《html上下滚动切换顶端tab jQuery实现Tab菜单滚动切换的方法》对你有帮助，请点赞、收藏，并留下你的观点哦！
