超平滑滚动的jQuery标签分栏切换效果

时间：2013-04-01 20:53 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery超平滑滚动的标签分栏切换效果</title>
<style>
body {
	font-size: 10px;
	font-family: verdana,sans-serif;
	background-color: gray;
	background-image: url();
	background-position: 50% 50%;
	padding: 0px;
	margin: 0px;
}
.content {
	width: 800px;
	margin: 0px auto;
	background-color: #ffffff;
	padding: 20px;
}

h1 {
	color:#221A69;
	font-weight:normal;
	text-decoration:none;
}

.tabbed_content {
	background-color: #000000;
	width: 620px;	
}

.tabs {
	height: 62px;
	position: relative;
}
.tabs .moving_bg {
	padding: 15px;
	background-color:#7F822A;
	background-image:url(http://www.codefans.net/jscss/demoimg/201303/arrow_down_green.gif);
	position: absolute;
	width: 125px;
	z-index: 190;
	left: 0;
	padding-bottom: 29px;
	background-position: bottom left;
	background-repeat: no-repeat;
}

.tabs .tab_item {
	display: block;
	float: left;
	padding: 15px;
	width: 125px;
	color: #ffffff;
	text-align: center;
	z-index: 200;
	position: relative;
	cursor: pointer;
}

.tabbed_content .slide_content {
	overflow: hidden;
	background-color: #000000;
	padding: 20px 0 20px 20px;
	position: relative;
	width: 600px;
}

.tabslider {
	width: 5000px;
}

.tabslider ul {
	float: left;
	width: 560px;
	margin: 0px;
	padding: 0px;
	margin-right: 40px;
}

.tabslider ul a {
	color: #ffffff;
	text-decoration: none;
}

.tabslider ul a:hover {
	color: #aaaaaa;
}

.tabslider ul li {
	padding-bottom: 7px;
}
</style>
<script type='text/javascript' src='http://www.codefans.net/ajaxjs/jquery1.3.2.js'></script>
<script type="text/javascript">
var TabbedContent = {
	init: function() {	
		$(".tab_item").mouseover(function() {
		
			var background = $(this).parent().find(".moving_bg");
			
			$(background).stop().animate({
				left: $(this).position()['left']
			}, {
				duration: 300
			});
			
			TabbedContent.slideContent($(this));
			
		});
	},
	
	slideContent: function(obj) {
		
		var margin = $(obj).parent().parent().find(".slide_content").width();
		margin = margin * ($(obj).prevAll().size() - 1);
		margin = margin * -1;
		
		$(obj).parent().parent().find(".tabslider").stop().animate({
			marginLeft: margin + "px"
		}, {
			duration: 300
		});
	}
}

$(document).ready(function() {
	TabbedContent.init();
});
</script>
</head>
<body>
<div style='padding: 15px;'>
	<div class='content'>
		<h1>Tabbed content with jQuery</h1>
		<p>
		An example of some tabbed content containers.
		</p> 
				
		<h2>Example:</h2>
		<div class='tabbed_content'>
		<div class='tabs'>
			<div class='moving_bg'>
				 
				</div>
				<span class='tab_item'>
					Latest posts
				</span>
				<span class='tab_item'>
							Top posts
						</span>
						<span class='tab_item'>
							Partners
						</span>
						<span class='tab_item'>
							Links
						</span>
					</div>
					
					<div class='slide_content'>						
						<div class='tabslider'>
						<ul>
							<li>
					<a href='#'>
										New looks coming your way
									</a>
								</li>
								<li>
									<a href='#'>
										jQuery convertion: Panoramic Photoviewer in Javascript
									</a>
								</li>
								<li>
									<a href='#'>
										jQuery convertion: Garagedoor effect using Javascript
									</a>
								</li>
								<li>
									<a href='#'>
										Image slider for displaying pictures or portfolios
									</a>
								</li>
								<li>
									<a href='#'>
										AjaxTwits - Load Tweets on your website with AJAX
									</a>
								</li>
							</ul>
							<ul>
								<li>
									<a href='#'>
										Panoramic Photoviewer in Javascript
									</a>
								</li>
								<li>
									<a href='#'>
										New looks coming your way
									</a>
								</li>
								<li>
									<a href='#'>
										jQuery convertion: Garagedoor effect using Javascript
									</a>
								</li>
								<li>
									<a href='/'>
										jQuery convertion: Panoramic Photoviewer in Javascript
									</a>
								</li>
								<li>
									<a href='#'>
										Lightbox + PhotoNav = LightNav
									</a>
								</li>
							</ul>
							<ul>
								<li>
									<a href='#'>
										Sieb Design | Design + Illustration
									</a>
								</li>
								<li>
									<a href='#'>
										Cybox | Internet & Communicatie
									</a>
								</li>
								<li>
									<a href='#'>
										Hypekid | Pim Arts, a freelance web-developer from the Netherlands
									</a>
								</li>
								<li>
									<a href='#'>
										Marcofolio | Marco's weblog
									</a>
								</li>
								<li>
									<a href='#'>
										Dev Tips | Become a better developer, one tip at a time
									</a>
								</li>
							</ul>
							<ul>
								<li>
									<a href='#'>
										Last.fm profile
									</a>
								</li>
								<li>
									<a href='#'>
										Gaya Design on Twitter
									</a>
								</li>
								<li>
									<a href='#'>
										My Youtube Channel
									</a>
								</li>
								<li>
									<a href='#'>
										Linked in profile
									</a>
								</li>
								<li>
									<a href='#'>
										Stuff to do with a NDS blog
									</a>
								</li>
							</ul>
						</div>
						<br style='clear: both' />
					</div>
				</div>
				
				<br />
				<br />
				
				<div class='tabbed_content'>
					<div class='tabs'>
						<div class='moving_bg'>
							 
						</div>
						<span class='tab_item'>
							Latest posts
						</span>
						<span class='tab_item'>
							Top posts
						</span>
						<span class='tab_item'>
							Partners
						</span>
						<span class='tab_item'>
							Links
						</span>
					</div>
					
					<div class='slide_content'>						
						<div class='tabslider'>
							<ul>
								<li>
									<a href='/'>
										New looks coming your way
									</a>
								</li>
								<li>
									<a href='/'>
										jQuery convertion: Panoramic Photoviewer in Javascript
									</a>
								</li>
								<li>
									<a href='/'>
										jQuery convertion: Garagedoor effect using Javascript
									</a>
								</li>
								<li>
									<a href='/'>
										Image slider for displaying pictures or portfolios
									</a>
								</li>
								<li>
									<a href='/'>
										AjaxTwits - Load Tweets on your website with AJAX
									</a>
								</li>
							</ul>
							<ul>
								<li>
									<a href='/'>
										Panoramic Photoviewer in Javascript
									</a>
								</li>
								<li>
									<a href='/'>
										New looks coming your way
									</a>
								</li>
								<li>
									<a href='/'>
										jQuery convertion: Garagedoor effect using Javascript
									</a>
								</li>
								<li>
									<a href='/'>
										jQuery convertion: Panoramic Photoviewer in Javascript
									</a>
								</li>
								<li>
									<a href='/'>
										Lightbox + PhotoNav = LightNav
									</a>
								</li>
							</ul>
							<ul>
								<li>
									<a href='#'>
										Sieb Design | Design + Illustration
									</a>
								</li>
								<li>
									<a href='#'>
										Cybox | Internet & Communicatie
									</a>
								</li>
								<li>
									<a href='#'>
										Hypekid | Pim Arts, a freelance web-developer from the Netherlands
									</a>
								</li>
								<li>
									<a href='#'>
										Marcofolio | Marco's weblog
									</a>
								</li>
								<li>
									<a href='#'>
										Dev Tips | Become a better developer, one tip at a time
									</a>
								</li>
							</ul>
							<ul>
								<li>
									<a href='#'>
										Last.fm profile
									</a>
								</li>
								<li>
									<a href='#'>
										Gaya Design on Twitter
									</a>
								</li>
								<li>
									<a href='#'>
										My Youtube Channel
									</a>
								</li>
								<li>
									<a href='#'>
										Linked in profile
									</a>
								</li>
								<li>
									<a href='#'>
										Stuff to do with a NDS blog
									</a>
								</li>
							</ul>
						</div>
						<br style='clear: both' />
					</div>
				</div>
			</div>
		</div>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

超平滑滚动的jQuery标签分栏切换效果，老外的作品，后半部分的代码有点乱，正起赶时间就不细整理了，喜欢的自己拷贝代码慢慢整理一下代码，呵呵，虽乱但功能不乱，预览看效果吧，超不错的标签滚动切换，网页特效代码，尽在源码爱好者网页特效栏目。超平滑滚动的jQuery标签分栏切换效果由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/daohang/1000.html

标签：网站源码