jquery tab選項卡滑動切換漸隱切換



79 315 106



特效描述: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.cqetom.live/" target="_blank">jquery表格變色隔行變色鼠標滑過豎直表格內容變色效果</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jQuery浮動層點擊圖標按鈕關閉或展開</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jquery浮動定位層導航描點上下滾動的浮動導航</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">div css3樣式表制作jquery返回頂部特效</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jquery 表格插件控制表格表格內容拖動標題固定在頂部</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jquery表格可編輯修改表格里面的數值</a></li>
				</ul>
			</div><!--tabcon end-->
			<div class="sublist">
				<ul>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">js lazyload實現網頁圖片延遲加載特效</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">js圖片切換插件帶濾鏡百葉窗圖片js幻燈片切換特效</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">js圖片特效制作js焦點圖上下滾動slider切換效果</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">javascript圖片特效 網站banner制作焦點圖片切換帶按鈕和固定圖標控制圖片左右滾動</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">js文字切換特效制作焦點文字帶濾鏡切換效果</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">js文字特效制作js文字閃爍與文字變色效果</a></li>
				</ul>
			</div><!--tabcon end-->
			<div class="sublist">
				<ul>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">div+css制作在IE6 上用absolute模擬fixed IE6瀏覽器定位層框不閃動</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">CSS如何定位工程</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">div+css導航菜單用CSS樣式表處理斜角導航條</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">用div+css3美化制作動畫導航特效鼠標滑過動畫顯示</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">css3垂直滑動手風琴導航菜單多種手風琴演示</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">css3教程應用css3 transform屬性 圖片旋轉與盒投影+鼠標懸停效果</a></li>
				</ul>
			</div><!--tabcon end-->
			<div class="sublist">
				<ul>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jquery 圖片特效用CSS3和HTML5制作仿動畫頭條報紙縮小到放大翻轉圖片展示</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jquery 幻燈片切換應用一個HTML5的幻燈片</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jquery 圖片滾動特效應用旋轉幻燈片使用jQuery和CSS3</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jquery html5 canvas 圖表插件獲取表格數據值生成走勢圖</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jquery select框應用jquery ui滑塊slider制作日期時間進度條</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" 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.cqetom.live/">jquery 特效</a></li>
		<li><a href="http://www.cqetom.live/">javascript 特效</a></li>
		<li><a href="http://www.cqetom.live/">div+css 教程</a></li>
		<li><a href="http://www.cqetom.live/">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.cqetom.live/" target="_blank">jquery表格變色隔行變色鼠標滑過豎直表格內容變色效果</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jQuery浮動層點擊圖標按鈕關閉或展開</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jquery浮動定位層導航描點上下滾動的浮動導航</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">div css3樣式表制作jquery返回頂部特效</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jquery 表格插件控制表格表格內容拖動標題固定在頂部</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jquery表格可編輯修改表格里面的數值</a></li>
				</ul>
			</div><!--tabcon end-->
			<div class="sublist">
				<ul>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">js lazyload實現網頁圖片延遲加載特效</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">js圖片切換插件帶濾鏡百葉窗圖片js幻燈片切換特效</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">js圖片特效制作js焦點圖上下滾動slider切換效果</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">javascript圖片特效 網站banner制作焦點圖片切換帶按鈕和固定圖標控制圖片左右滾動</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">js文字切換特效制作焦點文字帶濾鏡切換效果</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">js文字特效制作js文字閃爍與文字變色效果</a></li>
				</ul>
			</div><!--tabcon end-->
			<div class="sublist">
				<ul>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">div+css制作在IE6 上用absolute模擬fixed IE6瀏覽器定位層框不閃動</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">CSS如何定位工程</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">div+css導航菜單用CSS樣式表處理斜角導航條</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">用div+css3美化制作動畫導航特效鼠標滑過動畫顯示</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">css3垂直滑動手風琴導航菜單多種手風琴演示</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">css3教程應用css3 transform屬性 圖片旋轉與盒投影+鼠標懸停效果</a></li>
				</ul>
			</div><!--tabcon end-->
			<div class="sublist">
				<ul>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jquery 圖片特效用CSS3和HTML5制作仿動畫頭條報紙縮小到放大翻轉圖片展示</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jquery 幻燈片切換應用一個HTML5的幻燈片</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jquery 圖片滾動特效應用旋轉幻燈片使用jQuery和CSS3</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jquery html5 canvas 圖表插件獲取表格數據值生成走勢圖</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jquery select框應用jquery ui滑塊slider制作日期時間進度條</a></li>
					<li><span>?</span><a href="http://www.cqetom.live/" 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.cqetom.live/">jquery 特效</a></li>
		<li><a href="http://www.cqetom.live/">javascript 特效</a></li>
		<li><a href="http://www.cqetom.live/">div+css 教程</a></li>
		<li><a href="http://www.cqetom.live/">HTML5 特效</a></li>
	</ul><!--tabbtn end-->
	<div class="tabcon" id="fadecon">
		<div class="sublist">
			<ul>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jquery表格變色隔行變色鼠標滑過豎直表格內容變色效果</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jQuery浮動層點擊圖標按鈕關閉或展開</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jquery浮動定位層導航描點上下滾動的浮動導航</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">div css3樣式表制作jquery返回頂部特效</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jquery 表格插件控制表格表格內容拖動標題固定在頂部</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jquery表格可編輯修改表格里面的數值</a></li>
			</ul>
		</div><!--tabcon end-->
		<div class="sublist">
			<ul>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">js lazyload實現網頁圖片延遲加載特效</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">js圖片切換插件帶濾鏡百葉窗圖片js幻燈片切換特效</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">js圖片特效制作js焦點圖上下滾動slider切換效果</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">javascript圖片特效 網站banner制作焦點圖片切換帶按鈕和固定圖標控制圖片左右滾動</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">js文字切換特效制作焦點文字帶濾鏡切換效果</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">js文字特效制作js文字閃爍與文字變色效果</a></li>
			</ul>
		</div><!--tabcon end-->
		<div class="sublist">
			<ul>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">div+css制作在IE6 上用absolute模擬fixed IE6瀏覽器定位層框不閃動</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">CSS如何定位工程</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">div+css導航菜單用CSS樣式表處理斜角導航條</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">用div+css3美化制作動畫導航特效鼠標滑過動畫顯示</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">css3垂直滑動手風琴導航菜單多種手風琴演示</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">css3教程應用css3 transform屬性 圖片旋轉與盒投影+鼠標懸停效果</a></li>
			</ul>
		</div><!--tabcon end-->
		<div class="sublist">
			<ul>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jquery 圖片特效用CSS3和HTML5制作仿動畫頭條報紙縮小到放大翻轉圖片展示</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jquery 幻燈片切換應用一個HTML5的幻燈片</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jquery 圖片滾動特效應用旋轉幻燈片使用jQuery和CSS3</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jquery html5 canvas 圖表插件獲取表格數據值生成走勢圖</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jquery select框應用jquery ui滑塊slider制作日期時間進度條</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" 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.cqetom.live/">jquery 特效</a></li>
		<li><a href="http://www.cqetom.live/">javascript 特效</a></li>
		<li><a href="http://www.cqetom.live/">div+css 教程</a></li>
		<li><a href="http://www.cqetom.live/">HTML5 特效</a></li>
	</ul><!--tabbtn end-->
	<div class="tabcon" id="normalcon">
		<div class="sublist">
			<ul>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jquery表格變色隔行變色鼠標滑過豎直表格內容變色效果</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jQuery浮動層點擊圖標按鈕關閉或展開</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jquery浮動定位層導航描點上下滾動的浮動導航</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">div css3樣式表制作jquery返回頂部特效</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jquery 表格插件控制表格表格內容拖動標題固定在頂部</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jquery表格可編輯修改表格里面的數值</a></li>
			</ul>
		</div><!--tabcon end-->
		<div class="sublist">
			<ul>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">js lazyload實現網頁圖片延遲加載特效</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">js圖片切換插件帶濾鏡百葉窗圖片js幻燈片切換特效</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">js圖片特效制作js焦點圖上下滾動slider切換效果</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">javascript圖片特效 網站banner制作焦點圖片切換帶按鈕和固定圖標控制圖片左右滾動</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">js文字切換特效制作焦點文字帶濾鏡切換效果</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">js文字特效制作js文字閃爍與文字變色效果</a></li>
			</ul>
		</div><!--tabcon end-->
		<div class="sublist">
			<ul>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">div+css制作在IE6 上用absolute模擬fixed IE6瀏覽器定位層框不閃動</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">CSS如何定位工程</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">div+css導航菜單用CSS樣式表處理斜角導航條</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">用div+css3美化制作動畫導航特效鼠標滑過動畫顯示</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">css3垂直滑動手風琴導航菜單多種手風琴演示</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">css3教程應用css3 transform屬性 圖片旋轉與盒投影+鼠標懸停效果</a></li>
			</ul>
		</div><!--tabcon end-->
		<div class="sublist">
			<ul>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jquery 圖片特效用CSS3和HTML5制作仿動畫頭條報紙縮小到放大翻轉圖片展示</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jquery 幻燈片切換應用一個HTML5的幻燈片</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jquery 圖片滾動特效應用旋轉幻燈片使用jQuery和CSS3</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jquery html5 canvas 圖表插件獲取表格數據值生成走勢圖</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" target="_blank">jquery select框應用jquery ui滑塊slider制作日期時間進度條</a></li>
				<li><span>?</span><a href="http://www.cqetom.live/" 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

加群請備注:從官網了解到

老夫子电子