jQuery 让你的Tab菜单滚动的代码

2024-09-05 12:20:38

字体：大中小

来源：转载

供稿：网友

jQuery 让你的Tab菜单滚动的代码,先运行一下看看效果咋样?是不是超不错,让你的网页变得灵动起来,不再静止,学习jquery的朋友也可作为范例来参考吧.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head><title>jQuery 让你的Tab菜单滚动的代码</title><script type="text/javascript" src="/ajaxjs/jquery1.3.2.js"></script><style>		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;			}	</style>	<script>	$(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});		});			});		</script></head><body><div id="moving_tab">	<div class="tabs">		<div class="lava"></div>		<span class="item">Popular Posts</span>		<span class="item">Recent Posts</span>	</div>						<div class="content">								<div class="panel">									<ul>				<li>Panel 01 Item 01</li>				<li>Panel 01 Item 02</li>				<li>Panel 01 Item 03</li>				<li>Panel 01 Item 04</li>				<li>Panel 01 Item 05</li>			</ul>			<ul>				<li>Panel 02 Item 01</li>				<li>Panel 02 Item 02</li>				<li>Panel 02 Item 03</li>				<li>Panel 02 Item 04</li>				<li>Panel 02 Item 05</li>						</ul>								</div>	</div>	</div></body></html>

上一篇：CSS代码精简的二级菜单

下一篇：简洁 Tab 选项卡，CSS代码

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注