• 欢迎访问小辉博客,有访必回!广告为已更换为百度联盟,希望随手点下,虽然博客是兴趣所在,但也想有一个良性循环!请大家谅解!

超酷jquery可重复应用滑动式Tab选项卡切换

未分类 小辉 178次浏览 已收录 0个评论 扫描二维码

代码特点:

1,基于JQUERY库实现动画;

2,选项卡卡头背景块可同步横向滑动;

3,可以同一页面内多处重复应用;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>超酷jquery在同一页面可放多个滑动门代码-ewCEO.com</title>
<meta name="Keywords" content="jQuery代码,滑动门,js代码">
<meta name="Description" content="本代码为超酷jquery在同一页面可放多个滑动门代码,支持IE4 +,NS6 +,Mozilla,Firefox和Opera 7浏览器,供站长们学习交流。">
<style>
body {font-size: 12px;font-family: verdana,sans-serif;background-color: gray;padding: 0px;margin: 0px;}
.content {width: 620px;margin: 0px auto;background-color: #ffffff;padding: 20px;}
.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.duice.net/UploadFiles/wzjs/wytx/hdm/hdm02/images/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 src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js" type="text/javascript"></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’>
				
<div class=’tabbed_content’>
<div class=’tabs’>
	<div class=’moving_bg’> </div>
	<span class=’tab_item’>零度对策</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=’#’>零度对策--中小企业网络营销专家</a></li>
		<li><a href=’#’>致力于中小企业网络营销研究,开展网络营销服务</a></li>
		<li><a href=’#’>零度对策--中小企业网络营销专家</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=’#’>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=’#’>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>
	</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’>零度对策</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=’#’>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=’#’>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>
	</div>
	<br style=’clear: both’ />
</div>
</div>
</div>
</div>
</body>
</html>


小辉博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明超酷jquery可重复应用滑动式Tab选项卡切换

喜欢 (0)
[cnbzzh@qq.com]
分享 (0)
小辉
关于作者:
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址