jQuery 讓你的Tab菜單滾動的代碼

2024-09-05 12:20:38

字體：大中小

供稿：網(wǎng)友

jQuery 讓你的Tab菜單滾動的代碼,先運行一下看看效果咋樣?是不是超不錯,讓你的網(wǎng)頁變得靈動起來,不再靜止,學習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   class="iwvjtn8m0"   id="moving_tab">	<div   id="iwvjtn8m0"   class="tabs">		<div   id="iwvjtn8m0"   class="lava"></div>		<span id="iwvjtn8m0"    class="item">Popular Posts</span>		<span id="iwvjtn8m0"    class="item">Recent Posts</span>	</div>						<div   id="iwvjtn8m0"   class="content">								<div   id="iwvjtn8m0"   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代碼