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

首页 > IT技术

作者：起点终站

2016年5月27日 15:14 星期五

字号：小中大

评论：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>