jQuery實(shí)現(xiàn)的Tab滑動(dòng)選項(xiàng)卡及圖片切換(多種效果)小結(jié)
更新時(shí)間：2015年09月14日 15:38:28 作者：企鵝
這篇文章主要介紹了jQuery實(shí)現(xiàn)的Tab滑動(dòng)選項(xiàng)卡及圖片切換效果小結(jié),實(shí)例總結(jié)了幾種常見的tab切換效果,包括鼠標(biāo)點(diǎn)擊切換、滑過切換、定時(shí)自動(dòng)切換等,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)的Tab滑動(dòng)選項(xiàng)卡及圖片切換效果。分享給大家供大家參考。具體如下：
這里匯總了幾個(gè)Tab，滑動(dòng)門，選項(xiàng)卡，圖片切換，在一個(gè)網(wǎng)頁中實(shí)現(xiàn)了超多的常用效果，大家喜歡的滑動(dòng)門，焦點(diǎn)圖切換，標(biāo)簽選項(xiàng)卡以及文字輪番等都集中在了一起，無聊的功勞，忙的時(shí)候還顧不上寫，另外還加入了圓角，都是參考以前學(xué)習(xí)的知識寫的。期間使用了jquery-1.6.2.min.js框架庫。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/jquery-n-tab-cha-pic-codes/
具體代碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tab</title>
<style>
html body {margin:0px; padding:0px;}
.t_body{border:1px solid #ddd; padding:10px; width:250px; margin:50px;float:left;}
.aa {background-color:#eee; width:25px; cursor:pointer; float:left; margin-left:10px; text-align:center;}
.bb {background-color:#eae; width:250px; height:250px; display:none; font-size:50px;}
.cc {background-color:#eee; width:100%; height:20px; display:none;}
.on {background-color:#c21; width:30px; border-bottom:0px; border-top:0px;}
.yuan1 span {display: block;overflow: hidden;height: 1px; border-color:#77a;}
.yuan2 span {display: block;overflow: hidden;height: 1px; border-color:#77a;}
.span1 {margin:0px 3px; background-color:#77a;}
.span2 {margin:0px 1px; border-left:2px solid; border-right:2px solid;}
.span3 {margin:0px 1px; border-left:1px solid; border-right:1px solid;}
.d_body {margin:50px;width:400px; height:400px; font-size:12px;float:left;}
.d_top {height:40px; border-left:1px solid #77a; border-right:1px solid #77a;}
.d_t {float:left; margin-top:7px; margin-left:10px; border:1px solid #77a; width:100px; height:31px; line-height:31px; background-color:#eee;}
.d_t a {color:#555; text-decoration:none;}
.d_t a:hover {color:#933; text-decoration:underline; font-weight:bold; }
.d_main {border:1px solid #77a; border-top:0px; height:300px;}
.ln {position:relative; border-bottom:1px solid #77a; top:40px; z-index:-1;}
.bbb {background-color:#fff; height:100%; display:none; margin:10px;}
.on1 {border-bottom:1px solid #fff; background-color:#fff;}
.fl {float:left;}
.clr {clear:both;}
.of {overflow:hidden;}
.textcenter{text-align:center;vertical-align:middle;}
</style>
<script src="jquery-1.6.2.min.js"></script>
<script>
$(document).ready(function() {
/*
o1: 標(biāo)簽元素
o2: 內(nèi)容元素
c : 標(biāo)簽元素顯示用樣式
e : 觸發(fā)事件 如 click mouseover
*/
function tab1(o1,o2,c,e){
o1.each(function(i){
$(this).bind(e,function(){
o2.hide().eq(i).show();
o1.removeClass(c);
$(this).addClass(c);
})
if ($(this).hasClass(c)) {
$(this).addClass(c);
o2.hide().eq(i).show();
}
})
}
/*
o1: 標(biāo)簽元素
o2: 內(nèi)容元素
c : 標(biāo)簽元素顯示用樣式
t1: 標(biāo)簽切換時(shí)間
t2: 內(nèi)容漸進(jìn)時(shí)間
a : 內(nèi)容漸進(jìn)起始半透明度 0.1~1
b : 內(nèi)容漸進(jìn)結(jié)束半透明度 0.1~1
*/
function tab2(o1,o2,c,t1,t2,a,b){
var count=o1.size()-1;
var now;
var TimeInterval;
o1.each(function(i){
$(this).mouseover(function(){
o2.hide().eq(i).show();
o1.removeClass(c);
$(this).addClass(c);
window.clearInterval(TimeInterval);
}).mouseout(function(){
now = i+1;
TimeInterval = window.setInterval(changeimage,t1);
});
//初始化顯示
if ($(this).hasClass(c)) {
$(this).addClass(c);
o2.hide().eq(i).show();
now = i+1;
}
})
TimeInterval = window.setInterval(changeimage,t1);
function changeimage(){
if(now>count)now=0;
o2.hide().eq(now).stop().fadeTo(0,a).fadeTo(t2,b);
o1.removeClass(c).eq(now).addClass(c);
now++;
}
}
/*
o1: 標(biāo)簽元素
o2: 內(nèi)容元素
o3: 內(nèi)容元素
c : 標(biāo)簽元素顯示用樣式
e : 觸發(fā)事件 如 click mouseover
*/
function tab3(o1,o2,o3,c,e){
o1.each(function(i){
$(this).bind(e,function(){
o2.hide().eq(i).show();
o3.hide().eq(i).show();
o1.removeClass(c);
$(this).addClass(c);
})
if ($(this).hasClass(c)) {
$(this).addClass(c);
o2.hide().eq(i).show();
o3.hide().eq(i).show();
}
})
}
/*
o1: 標(biāo)簽元素
o2: 內(nèi)容元素
o3: 內(nèi)容元素
c : 標(biāo)簽元素顯示用樣式
t1: 標(biāo)簽切換時(shí)間
t2: 內(nèi)容漸進(jìn)時(shí)間
a : 內(nèi)容漸進(jìn)起始半透明度 0.1~1
b : 內(nèi)容漸進(jìn)結(jié)束半透明度 0.1~1
*/
function tab4(o1,o2,o3,c,t1,t2,a,b){
var count=o1.size()-1;
var now;
var TimeInterval;
o1.each(function(i){
$(this).mouseover(function(){
o2.hide().eq(i).show();
o3.hide().eq(i).show();
o1.removeClass(c);
$(this).addClass(c);
window.clearInterval(TimeInterval);
}).mouseout(function(){
now = i+1;
TimeInterval = window.setInterval(changeimage,t1);
});
//初始化顯示
if ($(this).hasClass(c)) {
$(this).addClass(c);
o2.hide().eq(i).show();
o3.hide().eq(i).show();
now = i+1;
}
})
TimeInterval = window.setInterval(changeimage,t1);
function changeimage(){
if(now>count)now=0;
o3.hide().eq(now).show();
o2.hide().eq(now).stop().fadeTo(0,a).fadeTo(t2,b);
o1.removeClass(c).eq(now).addClass(c);
now++;
}
}
//調(diào)用函數(shù)
tab1($(".yuan1 .d_t"),$(".yuan1 .bbb"),"on1","mouseover");
tab1($(".yuan2 .d_t"),$(".yuan2 .bbb"),"on1","click");
tab1($(".d0 .aa"),$(".d0 .bb"),"on","click");
tab1($(".d1 .aa"),$(".d1 .bb"),"on","mouseover");
tab2($(".d2 .aa"),$(".d2 .bb"),"on",1500,800,0.1,1);
tab3($(".d3 .aa"),$(".d3 .bb"),$(".d3 .cc"),"on","mouseover");
tab4($(".d4 .aa"),$(".d4 .bb"),$(".d4 .cc"),"on",1500,800,0.1,1);
tab4($(".d5 .aa"),$(".d5 .bb"),$(".d5 .cc"),"on",1500,0,1,1);
});
</script>
</head>
<body>
<div class="d_body yuan1">
<div>鼠標(biāo)懸浮切換</div><br>
<span class="span1"></span><span class="span2"></span><span class="span3"></span>
<div class="d_top">
<div class="ln"></div>
<div class="d_t textcenter on1">
<a href="javascript:">第一個(gè)標(biāo)簽</a>
</div>
<div class="d_t textcenter">
<a href="javascript:">第二個(gè)標(biāo)簽</a>
</div>
<div class="d_t textcenter">
<a href="javascript:">第三個(gè)標(biāo)簽</a>
</div>
</div>
<div class="d_main clr of">
<div class="bbb"><font color="blue">第一個(gè)內(nèi)容</font></div>
<div class="bbb"><font color="red">第二個(gè)內(nèi)容</font></div>
<div class="bbb"><font color="black">第三個(gè)內(nèi)容</font></div>
</div>
<div class="clr of"></div>
</div>
<div class="d_body yuan2">
<div>點(diǎn)擊切換</div><br>
<span class="span1"></span><span class="span2"></span><span class="span3"></span>
<div class="d_top">
<div class="ln"></div>
<div class="d_t textcenter on1">
<a href="javascript:">第一個(gè)標(biāo)簽</a>
</div>
<div class="d_t textcenter">
<a href="javascript:">第二個(gè)標(biāo)簽</a>
</div>
<div class="d_t textcenter">
<a href="javascript:">第三個(gè)標(biāo)簽</a>
</div>
</div>
<div class="d_main clr of">
<div class="bb"><font color="blue">第一個(gè)內(nèi)容</font></div>
<div class="bb"><font color="red">第二個(gè)內(nèi)容</font></div>
<div class="bb"><font color="black">第三個(gè)內(nèi)容</font></div>
</div>
<div class="clr of"></div>
</div>
<div class="t_body d0">
<div class="aa">a</div>
<div class="aa">b</div>
<div class="aa on">c</div>
<div class="aa">d</div>
<div class="aa">e</div><br>
<div class="bb">1</div>
<div class="bb">2</div>
<div class="bb">點(diǎn)擊切換</div>
<div class="bb">4</div>
<div class="bb">5</div>
<div style="clear:both;"></div>
</div>
<div class="t_body d1">
<div class="aa">a</div>
<div class="aa">b</div>
<div class="aa on">c</div>
<div class="aa">d</div>
<div class="aa">e</div><br>
<div class="bb">1</div>
<div class="bb">2</div>
<div class="bb">3</div>
<div class="bb">4</div>
<div class="bb">5</div>
<div style="clear:both;"></div>
</div>
<div class="t_body d2">
<div class="aa">a</div>
<div class="aa">b</div>
<div class="aa on">c</div>
<div class="aa">d</div>
<div class="aa">e</div><br>
<div class="bb">1</div>
<div class="bb">2</div>
<div class="bb">3</div>
<div class="bb">4</div>
<div class="bb">5</div>
<div style="clear:both;"></div>
</div>
<div class="t_body d3">
<div class="aa">a</div>
<div class="aa">b</div>
<div class="aa on">c</div>
<div class="aa">d</div>
<div class="aa">e</div><br>
<div class="bb">1</div>
<div class="bb">2</div>
<div class="bb">懸浮切換</div>
<div class="bb">4</div>
<div class="bb">5</div>
<div class="cc">111111</div>
<div class="cc">222222</div>
<div class="cc">333333</div>
<div class="cc">444444</div>
<div class="cc">555555</div>
<div style="clear:both;"></div>
</div>
<div class="t_body d4">
<div class="aa">a</div>
<div class="aa">b</div>
<div class="aa on">c</div>
<div class="aa">d</div>
<div class="aa">e</div><br>
<div class="bb">1</div>
<div class="bb">2</div>
<div class="bb">3</div>
<div class="bb">4</div>
<div class="bb">5</div>
<div class="cc">111111</div>
<div class="cc">222222</div>
<div class="cc">333333</div>
<div class="cc">444444</div>
<div class="cc">555555</div>
<div style="clear:both;"></div>
</div>
<div class="t_body d5">
<div class="aa">a</div>
<div class="aa">b</div>
<div class="aa on">c</div>
<div class="aa">d</div>
<div class="aa">e</div><br>
<div class="bb">1</div>
<div class="bb">2</div>
<div class="bb">3</div>
<div class="bb">4</div>
<div class="bb">5</div>
<div class="cc">111111</div>
<div class="cc">222222</div>
<div class="cc">333333</div>
<div class="cc">444444</div>
<div class="cc">555555</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
希望本文所述對大家的jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
初步認(rèn)識JavaScript函數(shù)庫jQuery
這篇文章主要介紹了JavaScript函數(shù)庫jQuery的一些基本概念,包括其的添加方法和最基本的使用示例,需要的朋友可以參考下2015-06-06
正則驗(yàn)證小數(shù)點(diǎn)后面只能有兩位數(shù)的方法
下面小編就為大家?guī)硪黄齽t驗(yàn)證小數(shù)點(diǎn)后面只能有兩位數(shù)的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
AeroWindow是個(gè)Win7樣式的彈出窗口，jQuery插件，效果很酷!而且還像windows的窗口一樣可最大，最小化，隨意拖動(dòng)。2011-06-06
jQuery彈出層始終垂直居中相對于屏幕或當(dāng)前窗口
碰到?jīng)]有固定高或者固定寬或者固定高和寬的時(shí)候，我們就需要用JS去處理，去動(dòng)態(tài)獲取當(dāng)前窗口高或者寬；今天弄了2種情況，一個(gè)是相對于屏幕窗體，一個(gè)是相對于當(dāng)前的窗口，看代碼2013-04-04
彈窗效果想必大家都有見到過吧，在本文將為大家介紹下使用juery框架來寫個(gè)適合新手學(xué)習(xí)的彈窗效果2013-11-11
淺析jQuery(function(){})與(function(){})(jQuery)之間的區(qū)別
本篇文章主要是對jQuery(function(){})與(function(){})(jQuery)之間的區(qū)別進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
這篇文章主要為大家詳細(xì)介紹了jquery單擊文字或圖片內(nèi)容放大并居中顯示，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了JQuery中extend的用法,實(shí)例分析了extend的功能、定義及相關(guān)使用技巧,需要的朋友可以參考下2015-02-02
jquery下拉select控件操作方法分享(jquery操作select)
這篇文章主要介紹了jquery下拉select控件操作方法分享(jquery操作select),需要的朋友可以參考下2014-03-03
jQuery中的bind綁定事件與文本框改變事件的臨時(shí)解決方法
暫時(shí)沒有想到什么好的解決辦法，我現(xiàn)在加了個(gè)瀏覽器判斷非ie的話就注冊blur事件，這樣有個(gè)問題就是blur實(shí)在別的控件活動(dòng)焦點(diǎn)的時(shí)候，txtStation控件注冊的方法是為了填充它緊挨著的一個(gè)下拉列表2010-08-08