jquery tab选项卡滑动切换渐隐切换



76 301 101



特效描述:jquery tab选项卡 滑动切换 渐隐切换,jquery tab选项卡滑动切换渐隐切换

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tabso_yeso.js"></script>

2. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif,"宋体";}
a{color:#333;text-decoration:none;}
a:hover{color:#3366cc;text-decoration:underline;}
/* demo */
.demo{width:686px;margin:40px auto;position:relative;}
.demo h2{font-size:16px;height:44px;color:#3366cc;margin-top:20px;}
.demo dl dt{font-size:14px;color:#ff6600;margin-top:30px;font-weight:800;}
.demo dl dt,.demo dl dd{line-height:22px;}
/* tabbtn */
.tabbtn{height:30px;background:url(images/tabbg.gif) repeat-x;border-left:solid 1px #ddd;border-right:solid 1px #ddd;}
.tabbtn li{float:left;position:relative;margin:0 0 0 -1px;}
.tabbtn li a{display:block;float:left;height:30px;line-height:30px;overflow:hidden;width:108px;text-align:center;font-size:12px;cursor:pointer;}
.tabbtn li.current{border-left:solid 1px #d5d5d5;border-right:solid 1px #d5d5d5;border-top:solid 1px #c5c5c5;}
.tabbtn li.current a{border-top:solid 2px #ff6600;height:27px;line-height:27px;background:#fff;color:#3366cc;font-weight:800;}
/* tabcon */
.tabcon{border-width:0 1px 1px 1px;border-color:#ddd;border-style:solid;position:relative;/*必要元素*/height:180px;overflow:hidden;}
.tabcon .subbox{position:absolute;/*必要元素*/left:0;top:0;}
.tabcon .sublist{padding:5px 10px;height:170px;}
/* leftcon */
#leftcon .subbox{width:9999em;}
#leftcon .subbox .sublist{float:left;width:664px;}
/* sublist */
.sublist{padding:10px;}
.sublist li{height:28px;line-height:28px;font-size:12px;}
.sublist li span{margin:0 5px 0 0;font-family:"宋体";font-size:12px;font-weight:400;color:#ddd;}
</style>
<div class="demo">	
	<h2>实例1、上下滑动选项卡切换</h2>
	<ul class="tabbtn" id="move-animate-top">
		<li class="current"><a href="http://www.jsfoot.com/jquery/items/">jquery 特效</a></li>
		<li><a href="http://www.jsfoot.com/js/items/">javascript 特效</a></li>
		<li><a href="http://www.jsfoot.com/css3/items/">div+css 教程</a></li>
		<li><a href="http://www.jsfoot.com/html5/items/">HTML5 特效</a></li>
	</ul><!--tabbtn end-->
	<div class="tabcon" id="topcon">
		<div class="subbox">
			<div class="sublist">
				<ul>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery表格变色隔行变色鼠标滑过竖直表格内容变色效果</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jQuery浮动层点击图标按钮关闭或展开</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery浮动定位层导航描点上下滚动的浮动导航</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">div css3样式表制作jquery返回顶部特效</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery 表格插件控制表格表格内容拖动标题固定在顶部</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery表格可编辑修改表格里面的数值</a></li>
				</ul>
			</div><!--tabcon end-->
			<div class="sublist">
				<ul>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js lazyload实现网页图片延迟加载特效</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js图片切换插件带滤镜百叶窗图片js幻灯片切换特效</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js图片特效制作js焦点图上下滚动slider切换效果</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js文字切换特效制作焦点文字带滤镜切换效果</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js文字特效制作js文字闪烁与文字变色效果</a></li>
				</ul>
			</div><!--tabcon end-->
			<div class="sublist">
				<ul>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">CSS如何定位工程</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">div+css导航菜单用CSS样式表处理斜角导航条</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">css3垂直滑动手风琴导航菜单多种手风琴演示</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">css3教程应用css3 transform属性 图片旋转与盒投影+鼠标悬停效果</a></li>
				</ul>
			</div><!--tabcon end-->
			<div class="sublist">
				<ul>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery html5 canvas 图表插件获取表格数据值生成走势图</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery select框应用jquery ui滑块slider制作日期时间进度条</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery progress bar进度条插件,投票进度条系统</a></li>
				</ul>
			</div><!--tabcon end-->
		</div><!--tabcon end-->
	</div>
	<h2>实例2、左右滑动选项卡切换</h2>
	<ul class="tabbtn" id="move-animate-left">
		<li class="current"><a href="http://www.51qianduan.com/">jquery 特效</a></li>
		<li><a href="http://www.51qianduan.com/">javascript 特效</a></li>
		<li><a href="http://www.51qianduan.com/">div+css 教程</a></li>
		<li><a href="http://www.51qianduan.com/">HTML5 特效</a></li>
	</ul><!--tabbtn end-->
	<div class="tabcon" id="leftcon">
		<div class="subbox">
			<div class="sublist">
				<ul>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery表格变色隔行变色鼠标滑过竖直表格内容变色效果</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jQuery浮动层点击图标按钮关闭或展开</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery浮动定位层导航描点上下滚动的浮动导航</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">div css3样式表制作jquery返回顶部特效</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery 表格插件控制表格表格内容拖动标题固定在顶部</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery表格可编辑修改表格里面的数值</a></li>
				</ul>
			</div><!--tabcon end-->
			<div class="sublist">
				<ul>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js lazyload实现网页图片延迟加载特效</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js图片切换插件带滤镜百叶窗图片js幻灯片切换特效</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js图片特效制作js焦点图上下滚动slider切换效果</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js文字切换特效制作焦点文字带滤镜切换效果</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js文字特效制作js文字闪烁与文字变色效果</a></li>
				</ul>
			</div><!--tabcon end-->
			<div class="sublist">
				<ul>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">CSS如何定位工程</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">div+css导航菜单用CSS样式表处理斜角导航条</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">css3垂直滑动手风琴导航菜单多种手风琴演示</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">css3教程应用css3 transform属性 图片旋转与盒投影+鼠标悬停效果</a></li>
				</ul>
			</div><!--tabcon end-->
			<div class="sublist">
				<ul>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery html5 canvas 图表插件获取表格数据值生成走势图</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery select框应用jquery ui滑块slider制作日期时间进度条</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery progress bar进度条插件,投票进度条系统</a></li>
				</ul>
			</div><!--tabcon end-->
		</div><!--tabcon end-->
	</div>
	<h2>实例3、淡隐淡现选项卡切换</h2>
	<ul class="tabbtn" id="fadetab">
		<li class="current"><a href="http://www.51qianduan.com/">jquery 特效</a></li>
		<li><a href="http://www.51qianduan.com/">javascript 特效</a></li>
		<li><a href="http://www.51qianduan.com/">div+css 教程</a></li>
		<li><a href="http://www.51qianduan.com/">HTML5 特效</a></li>
	</ul><!--tabbtn end-->
	<div class="tabcon" id="fadecon">
		<div class="sublist">
			<ul>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery表格变色隔行变色鼠标滑过竖直表格内容变色效果</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jQuery浮动层点击图标按钮关闭或展开</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery浮动定位层导航描点上下滚动的浮动导航</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">div css3样式表制作jquery返回顶部特效</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery 表格插件控制表格表格内容拖动标题固定在顶部</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery表格可编辑修改表格里面的数值</a></li>
			</ul>
		</div><!--tabcon end-->
		<div class="sublist">
			<ul>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js lazyload实现网页图片延迟加载特效</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js图片切换插件带滤镜百叶窗图片js幻灯片切换特效</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js图片特效制作js焦点图上下滚动slider切换效果</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js文字切换特效制作焦点文字带滤镜切换效果</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js文字特效制作js文字闪烁与文字变色效果</a></li>
			</ul>
		</div><!--tabcon end-->
		<div class="sublist">
			<ul>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">CSS如何定位工程</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">div+css导航菜单用CSS样式表处理斜角导航条</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">css3垂直滑动手风琴导航菜单多种手风琴演示</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">css3教程应用css3 transform属性 图片旋转与盒投影+鼠标悬停效果</a></li>
			</ul>
		</div><!--tabcon end-->
		<div class="sublist">
			<ul>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery html5 canvas 图表插件获取表格数据值生成走势图</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery select框应用jquery ui滑块slider制作日期时间进度条</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery progress bar进度条插件,投票进度条系统</a></li>
			</ul>
		</div><!--tabcon end-->
	</div><!--tabcon end-->
	<h2>实例4、默认选项卡切换</h2>
	<ul class="tabbtn" id="normaltab">
		<li class="current"><a href="http://www.51qianduan.com/">jquery 特效</a></li>
		<li><a href="http://www.51qianduan.com/">javascript 特效</a></li>
		<li><a href="http://www.51qianduan.com/">div+css 教程</a></li>
		<li><a href="http://www.51qianduan.com/">HTML5 特效</a></li>
	</ul><!--tabbtn end-->
	<div class="tabcon" id="normalcon">
		<div class="sublist">
			<ul>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery表格变色隔行变色鼠标滑过竖直表格内容变色效果</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jQuery浮动层点击图标按钮关闭或展开</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery浮动定位层导航描点上下滚动的浮动导航</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">div css3样式表制作jquery返回顶部特效</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery 表格插件控制表格表格内容拖动标题固定在顶部</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery表格可编辑修改表格里面的数值</a></li>
			</ul>
		</div><!--tabcon end-->
		<div class="sublist">
			<ul>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js lazyload实现网页图片延迟加载特效</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js图片切换插件带滤镜百叶窗图片js幻灯片切换特效</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js图片特效制作js焦点图上下滚动slider切换效果</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js文字切换特效制作焦点文字带滤镜切换效果</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js文字特效制作js文字闪烁与文字变色效果</a></li>
			</ul>
		</div><!--tabcon end-->
		<div class="sublist">
			<ul>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">CSS如何定位工程</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">div+css导航菜单用CSS样式表处理斜角导航条</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">css3垂直滑动手风琴导航菜单多种手风琴演示</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">css3教程应用css3 transform属性 图片旋转与盒投影+鼠标悬停效果</a></li>
			</ul>
		</div><!--tabcon end-->
		<div class="sublist">
			<ul>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery html5 canvas 图表插件获取表格数据值生成走势图</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery select框应用jquery ui滑块slider制作日期时间进度条</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery progress bar进度条插件,投票进度条系统</a></li>
			</ul>
		</div><!--tabcon end-->
	</div><!--tabcon end-->
	<dl>
		<dt>应用说明:</dt>
		<dd>* 应用对象必须为标签按钮的直接父元素,且父元素内不包含其他非按钮元素</dd>
		<dd>* example: 
<pre>
$( ".menus_wrap" ).tabso({
	cntSelect:".content_wrap",
	tabEvent:"mouseover" 
});
</pre>
		</dd>
		<dd>* cntSelect:内容块的直接父元素的 jq 选择器</dd>
		<dd>* tabEvent:触发事件名</dd>
		<dd>* tabStyle:切换方式。可取值:"normal" "fade" "move" "move-fade" "move-animate"</dd>
		<dd>* direction:移动方向。可取值:"left" "top" (tabStyle为"move"或"move-fade" "move-animate"时有效)</dd>
		<dd>* aniMethod:动画方法(特殊效果需插件(如:easing)支持,tabStyle为"move-animate"时有效)</dd>
		<dd>* aniSpeed:动画速度</dd>
		<dd>* onStyle:菜单选中样式名</dd>
	</dl>
</div><!--tabbox end-->
<script type="text/javascript">
$(document).ready(function($){
	//上下滑动选项卡切换
	$("#move-animate-top").tabso({
		cntSelect:"#topcon",
		tabEvent:"mouseover",
		tabStyle:"move-animate",
		direction : "top"
	});
	//左右滑动选项卡切换
	$("#move-animate-left").tabso({
		cntSelect:"#leftcon",
		tabEvent:"mouseover",
		tabStyle:"move-animate",
		direction : "left"
	});
	//淡隐淡现选项卡切换
	$("#fadetab").tabso({
		cntSelect:"#fadecon",
		tabEvent:"mouseover",
		tabStyle:"fade"
	});
	//默认选项卡切换
	$("#normaltab").tabso({
		cntSelect:"#normalcon",
		tabEvent:"mouseover",
		tabStyle:"normal"
	});
});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 滑动星星打分 渐隐切换 淡出淡进 淡出 淡进 其他 滑动选项卡 滑动切换 文字淡出淡进 文字淡出 文字淡进 文字切换 文字选项卡 选项卡自动切换 渐隐切换 鼠标滑过 鼠标悬停 跟随鼠标移动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到