在本系列文章的前五篇介紹了jQuery Tools中的工具組件使用，閱讀過的朋友想必已經(jīng)對(duì)它有所了解。今天這篇是jQueryTools系列文章的最后一篇，來介紹一個(gè)綜合了jQueryTools中的滾動(dòng)效果（Scrollable）、遮罩效果（Overlay）、提示工具條（Tooltip）和突出效果（Expose）的綜合使用實(shí)例，希望能對(duì)jQuery Tools的靈活使用有更好的認(rèn)識(shí)。

這個(gè)示例應(yīng)該算是一個(gè)圖片展示的完整示例，首先看效果：

在上面示例中，首先看到的是縮略圖的展示，在縮略圖展示上應(yīng)用了滾動(dòng)效果，可通過左右導(dǎo)航或鍵盤左右鍵滾動(dòng)縮略圖。點(diǎn)擊縮略圖圖片，應(yīng)用遮罩效果彈出圖片的大圖，把鼠標(biāo)放在大圖上，應(yīng)用工具條提示效果展示圖片信息。在大圖展現(xiàn)時(shí)也應(yīng)用了滾動(dòng)效果，可通過左右導(dǎo)航或鍵盤左右鍵切換圖片。

下面我們來看是如何融合jQuery Tools中的工具組件，實(shí)現(xiàn)上面實(shí)例的：

1. HTML包含兩部分：縮略圖展示和大圖展示

   縮略圖HTML：

   <!-- 為滾動(dòng)效果的導(dǎo)航定義上一頁按鈕，注意class固定為prevPage --> 
   <!--導(dǎo)航按鈕注意與縮略圖滾動(dòng)區(qū)域同級(jí)-->
   <div class="navi prevPage"></div> 
    
   <!-- 定義縮略圖滾動(dòng)區(qū)域根節(jié)點(diǎn) --> 
   <div id="thumbnails"> 
    
       <!-- 為所有縮略圖定義根節(jié)點(diǎn)，注意class為items --> 
       <div class="items"> 
           <div><img src="img/thumb/thumb1.jpg" /></div> 
           <div><img src="img/thumb/thumb2.jpg" /></div> 
           <div><img src="img/thumb/thumb3.jpg" /></div> 
           ... 
       </div> 
   </div> 
    
   <!-- 為滾動(dòng)效果的導(dǎo)航定義下一頁按鈕，注意class固定為nextPage --> 
   <div class="navi nextPage"></div> 
   <br clear="all" />

   it知識(shí)庫：jQuery Tools——不可錯(cuò)過的jQuery UI庫（六），轉(zhuǎn)載需保留來源！

   鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。