在本系列文章的前五篇介绍了jQuery Tools中的工具组件使用，阅读过的朋友想必已经对它有所了解。今天这篇是jQueryTools系列文章的最后一篇，来介绍一个综合了jQueryTools中的滚动效果（Scrollable）、遮罩效果（Overlay）、提示工具条（Tooltip）和突出效果（Expose）的综合使用实例，希望能对jQuery Tools的灵活使用有更好的认识。

这个示例应该算是一个图片展示的完整示例，首先看效果：

在上面示例中，首先看到的是缩略图的展示，在缩略图展示上应用了滚动效果，可通过左右导航或键盘左右键滚动缩略图。点击缩略图图片，应用遮罩效果弹出图片的大图，把鼠标放在大图上，应用工具条提示效果展示图片信息。在大图展现时也应用了滚动效果，可通过左右导航或键盘左右键切换图片。

下面我们来看是如何融合jQuery Tools中的工具组件，实现上面实例的：

1. HTML包含两部分：缩略图展示和大图展示

   缩略图HTML：

   <!-- 为滚动效果的导航定义上一页按钮，注意class固定为prevPage --> 
   <!--导航按钮注意与缩略图滚动区域同级-->
   <div class="navi prevPage"></div> 
    
   <!-- 定义缩略图滚动区域根节点 --> 
   <div id="thumbnails"> 
    
       <!-- 为所有缩略图定义根节点，注意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> 
    
   <!-- 为滚动效果的导航定义下一页按钮，注意class固定为nextPage --> 
   <div class="navi nextPage"></div> 
   <br clear="all" />

   it知识库：jQuery Tools——不可错过的jQuery UI库（六），转载需保留来源！

   郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。