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

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

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

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

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

   縮略圖HTML：

   <!-- 為滾動效果的導(dǎo)航定義上一頁按鈕，注意class固定為prevPage --> 
   <!--導(dǎo)航按鈕注意與縮略圖滾動區(qū)域同級-->
   <div class="navi prevPage"></div> 
    
   <!-- 定義縮略圖滾動區(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ǎo)航定義下一頁按鈕，注意class固定為nextPage --> 
   <div class="navi nextPage"></div> 
   <br clear="all" />

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

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