jQuery實作的Tab滑動標籤及圖片切換(多種效果)小結

首頁

web前端

js教程

jQuery實作的Tab滑動標籤及圖片切換(多種效果)小結_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:39 PM

jquery tab 切換圖片滑動選項卡

本文實例講述了jQuery實現的Tab滑動選項卡及圖片切換效果。分享給大家供大家參考。具體如下：

這裡匯總了幾個Tab，滑動門，選項卡，圖片切換，在一個網頁中實現了超多的常用效果，大家喜歡的滑動門，焦點圖切換，標籤選項卡以及文字輪番等都集中在了一起，無聊的功勞，忙的時候還顧不上寫，另外還加入了圓角，都是參考以前學習的知識寫的。期間使用了jquery-1.6.2.min.js框架庫。

運作效果截圖如下：

線上示範網址如下：

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: 标签元素
  o2: 内容元素
  c : 标签元素显示用样式
  e : 触发事件 如 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: 标签元素
  o2: 内容元素
  c : 标签元素显示用样式
  t1: 标签切换时间
  t2: 内容渐进时间
  a : 内容渐进起始半透明度 0.1~1
  b : 内容渐进结束半透明度 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: 标签元素
  o2: 内容元素
  o3: 内容元素
  c : 标签元素显示用样式
  e : 触发事件 如 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: 标签元素
  o2: 内容元素
  o3: 内容元素
  c : 标签元素显示用样式
  t1: 标签切换时间
  t2: 内容渐进时间
  a : 内容渐进起始半透明度 0.1~1
  b : 内容渐进结束半透明度 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++;
  }
 }
 //调用函数
 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>鼠标悬浮切换</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:">第一个标签</a>
  </div>
  <div class="d_t textcenter">
   <a href="javascript:">第二个标签</a>
  </div>
  <div class="d_t textcenter">
   <a href="javascript:">第三个标签</a>
  </div>
 </div>
 <div class="d_main clr of">
  <div class="bbb"><font color="blue">第一个内容</font></div>
  <div class="bbb"><font color="red">第二个内容</font></div>
  <div class="bbb"><font color="black">第三个内容</font></div>
 </div>
 <div class="clr of"></div>
</div>
<div class="d_body yuan2">
 <div>点击切换</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:">第一个标签</a>
  </div>
  <div class="d_t textcenter">
   <a href="javascript:">第二个标签</a>
  </div>
  <div class="d_t textcenter">
   <a href="javascript:">第三个标签</a>
  </div>
 </div>
 <div class="d_main clr of">
  <div class="bb"><font color="blue">第一个内容</font></div>
  <div class="bb"><font color="red">第二个内容</font></div>
  <div class="bb"><font color="black">第三个内容</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">点击切换</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程式設計有所幫助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7663

CakePHP 教程

1393

C# 教程

1205

steam的賬戶名稱是什麼格式

win11激活密鑰永久

Related knowledge

小紅書發布自動儲存圖片怎麼解決？發布自動保存圖片在哪裡？ Mar 22, 2024 am 08:06 AM

隨著社群媒體的不斷發展，小紅書已經成為越來越多年輕人分享生活、發現美好事物的平台。許多用戶在發布圖片時遇到了自動儲存的問題，這讓他們感到十分困擾。那麼，如何解決這個問題呢？一、小紅書發布自動儲存圖片怎麼解決？ 1.清除快取首先，我們可以嘗試清除小紅書的快取資料。步驟如下：（1）開啟小紅書，點選右下角的「我的」按鈕；（2）在個人中心頁面，找到「設定」並點選；（3）向下捲動，找到「清除快取」選項，點擊確認。清除快取後，重新進入小紅書，嘗試發布圖片看是否解決了自動儲存的問題。 2.更新小紅書版本確保你的小

抖音評論裡怎麼發圖片？評論區圖片入口在哪裡？ Mar 21, 2024 pm 09:12 PM

隨著抖音短影片的火爆，用戶們在留言區互動變得更加豐富多彩。有些用戶希望在評論中分享圖片，以便更好地表達自己的觀點或情感。那麼，抖音評論裡怎麼發圖片呢？本文將為你詳細解答這個問題，並為你提供一些相關的技巧和注意事項。一、抖音評論裡怎麼發圖片？ 1.開啟抖音：首先，你需要開啟抖音APP，並登入你的帳號。 2.找到評論區：瀏覽或發布短影片時，找到想要評論的地方，點擊「評論」按鈕。 3.輸入評論內容：在留言區輸入你的評論內容。 4.選擇傳送圖片：在輸入評論內容的介面，你會看到一個「圖片」按鈕或「+」號按鈕，點

在 iPhone 上讓圖片更清晰的 6 種方法 Mar 04, 2024 pm 06:25 PM

Apple最近的iPhone可以透過清晰的細節、飽和度和亮度來捕捉回憶。但有時，您可能會遇到一些問題，這些問題可能會導致影像看起來不那麼清晰。儘管iPhone相機上的自動對焦已經取得了長足的進步，可以讓您快速拍照，但相機在某些情況下可能會錯誤地對焦錯誤的拍攝對象，從而使照片在不需要的區域更加模糊。如果iPhone上的照片看起來失焦或整體缺乏清晰度，以下貼文應該可以幫助您使它們更清晰。如何在iPhone上讓圖片更清晰[6種方法]您可以嘗試使用本機的「照片」應用程式來清理照片。如果您需要更多功能和選項

ppt怎麼讓圖片一張一張出來 Mar 25, 2024 pm 04:00 PM

在PowerPoint中，讓圖片逐一顯示是常用的技巧，可以透過設定動畫效果來實現。本指南詳細介紹了實現此技巧的步驟，包括基本設定、圖片插入、新增動畫、調整動畫順序和時間。此外，還提供了進階設定和調整，例如使用觸發器、調整動畫速度和順序，以及預覽動畫效果。透過遵循這些步驟和技巧，使用者可以輕鬆地在PowerPoint中設定圖片逐一出現，從而提升簡報的視覺效果並吸引觀眾的注意力。

網頁圖片載入不出來怎麼辦？ 6種解決辦法 Mar 15, 2024 am 10:30 AM

　　有網友發現打開瀏覽器網頁，網頁上的圖片遲遲加載不出來，是怎麼回事？檢查過網路是正常的，那是哪裡出現了問題呢？下面小編就來跟大家介紹一下網頁圖片載入不出來的六種解決方法。網頁圖片載入不出來：　　1、網速問題網頁顯示不出圖片有可能是因為電腦的網路速度比較慢，電腦中開啟的軟體比較多，　　而我們造訪的圖片比較大，這就可能因為載入逾時，導致圖片顯示不出來，　　可以將比較佔網速的軟體將關掉，可以去任務管理器查看一下。　　2、造訪人數過多　　網頁顯示不出圖片還有可能是因為我們造訪的網頁，在同時段造訪的

福昕PDF閱讀器如何將pdf文件轉成jpg圖片-福昕PDF閱讀器將pdf文件轉成jpg圖片的方法 Mar 04, 2024 pm 05:49 PM

你們是不是也在使用福昕PDF閱讀器軟體呢?那麼你們知道福昕PDF閱讀器如何將pdf文檔轉成jpg圖片嗎?下面這篇文章就為大夥帶來了福昕PDF閱讀器將pdf文檔轉成jpg圖片的方法，有興趣的夥伴們快來下文看看吧。先啟動福昕PDF閱讀器，接著在頂部工具列找到“特色功能”，然後選擇“PDF轉其他”功能。在接下來，開啟一個名為「福昕pdf線上轉換」的網頁。在頁面上方右側點選「登入」按鈕進行登錄，然後開啟「PDF轉圖片」功能。之後點擊上傳按鈕並將想要轉換成圖片的pdf檔加入進來，加入完畢後點擊「開始轉

wps文檔中兩張圖片怎麼並排 Mar 20, 2024 pm 04:00 PM

在使用wps辦公室軟體時，我們發現不單單只用一種形式，文字裡會加入表格和圖片，表格裡也可以加入圖片等等，這些都是合併使用的，讓整個文件的內容看起來更豐富，如果需要在文件中插入兩張圖片，而且需要並排排列。我們接下來的課程就可以解決這個問題：wps文件中兩張圖片怎麼並排。 1.首先要開啟WPS軟體，找到你想要調整的圖片。左鍵點擊圖片會彈出一個選單欄，選擇「頁面佈局」。 2、在文字環繞中選擇「緊密型環繞」。 3.當需要的圖片都確認設定為「緊密型文字環繞」之後，便可以把圖片隨意拖動到合適的位置，點擊第一張圖片

win11家庭版切換專業版操作教學_win11家庭版切換專業版操作教學 Mar 20, 2024 pm 01:58 PM

Win11家庭版怎麼轉換成Win11專業版?在Win11系統中，分為了家庭版、專業版、企業版等，而大部分Win11筆電都是預先安裝Win11家用版系統。而今天小編就帶給大家win11家庭版切換專業版操作步驟!1、先在win11桌面此電腦上右鍵屬性。 2、點選更改產品金鑰或升級windows。 3、然後進入後點選更改產品金鑰。 4.再輸入啟動金鑰：8G7XN-V7YWC-W8RPC-V73KB-YWRDB，選擇下一步。 5.接著就會提示成功，這樣就可以將win11家用版升級win11專業版了。

See all articles

jQuery實作的Tab滑動標籤及圖片切換(多種效果)小結_jquery

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題