很久没写过菜鸟级别的技术文章了，一是最近一段时间遇到了一些烦心事没能继续研究这方面的东西，二是最近公司里的管理层有稍许波动，有点影响了自己；而最为重要的是最近一段时间就跟女人每个月来月事时爱唠叨似的一年之中总有那么几天会莫名其妙的感到烦躁，心浮气躁自然是写不了程序啦！面壁了几天，算是基本渡过了这段莫名其妙的时间，从昨晚开始就在研究jquery插件jqzoom，今天效果出来了，趁现在还有点兴趣，记下使用jqzoom的感悟。

jqzoom是一个jquery插件，自然必须在jquery的js库下运行了。

先介绍一下jqzoom，其由国外某遵循BSD开源协议的开源组织所开发，其详细的代码下载以及文档地址如下：https://www.mind-projects.it/projects/jqzoom/ 。jqzoom的功能很简单，就是一个图片放大器。之前淘宝购物的物品详细页面的图片查看器就是类似的zoom js组件。说的多了有些没了解过的朋友们也看不明白，直接上图：

说明白了jqzoom是啥后，现在分析一下代码。js代码下有：

jqzoom=function(el,options){
........
};
$.jqzoom={
..........
}; 

一看就是运行在jquery下的插件，前者是类库的集成函数，后者里可以更改默认的动作以及样式外观。而需要指出的是jqzoom是配合css以及容器标签才能正常运行的，所以开源包里还有一个css文件需要引入到使用jqzoom的页面中。以下说下使用jqzoom的方法：

step1：在页面中引入jqzoom类库以及css库。其中jquery.jqzoom-core.js文件为未压缩的文件，体积较大（30k），而jquery.jqzoom-core-pack.js则为压缩过的jqzoom库，前者可以用来分析代码，后者则可以直接使用在项目中。代码如下：

<link rel="stylesheet" href="../Static/Style/jquery.jqzoom.css" type="text/css">
<script type="text/javascript" src="../Static/Js/jquery.jqzoom-core-pack.js">

step2:在页面中划出jqzoom的容器标签，其官方的demos包中建议使用a标签，我后来查看了jquery.jqzoom-core.js代码，发现其好像也仅仅只支持a标签作为容器标签。代码如下：

<a href="imgsr" class="jqzoom" title="产品样式外观细节查看" rel='gal1'>

其中a标签的href属性值即为需要放大的图片的url，而这个class则是必须的，title则是放大镜框上方的标题，而rel属性则是切换多图放大使用的标记，本文第一张图中所示下方列表四张图片即为此。

step3：初始化jqzoom，无需多说明，直接上代码：

<script type="text/javascript"> $(document).ready(function() { $('.jqzoom').jqzoom({ zoomType: 'reverse', lens:true, xOffset:65, preloadImages:false, alwaysOn:false });	 }); </script>

其配置的参数见本博客另外一篇文章查看，或者查看jquery.jqzoom-core.js中的options配置方式。

到此，使用方法说完，接下来在firebug下分析一下jqzoom运行的机理：

上图为firebug下的html代码查看的代码，是不是发现那个容器a标签内部潜入了一个class为zoomPad的div标签呢？其实展开zoomPad的div下方还有zoomPup以及zoomWindow两个并级的div标签，而zoomPup标签则为放大镜的移动框容器，zoomWindow则为放大镜放大框的容器。

一开始，我看到这些代码后就想着自己通过js代码来自己添加点击切换多图放大查看的代码，其更改机理就是强行更改以上jqzoom插入的几个容器代码中的img标签的src属性，具体实现方法就不多说了，只说这样做的严重的弊端，由于jqzoom本身自带了js事件的轮播函数，而且还将js获取标签节点的node的方式打包了循环筛选，所以我的这种方法是行不通的。以上我的想法写出代码后，一旦运行就会出现严重的内存溢出，表现出来的就是移动框移动速度减慢，感觉浏览器卡起来了.....综上所述，我的这种想法效果是能出来，但没有谁会用这个内存溢出严重的js代码，而且效果也是勉强出来的，要不是操作系统的内存管理性能强大，肯定是死机的命运。所以这种想法只能停留在理论上，而不能用在项目中。果断查看英文文档配合看jqzoom源代码包，才发现jqzoom已经提供了多图切换放大的功能，而且无需额外的配置，只需要按他提供的要求将相应的列表标签带上指定的class即可。

直接上代码：

<ul id="thumblist" class="clearfix" >
 <li><a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small1.jpg',largeimage: './imgProd/triumph_big1.jpg'}"><img src='imgProd/thumbs/triumph_thumb1.jpg'></a></li>
 <li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small2.jpg',largeimage: './imgProd/triumph_big2.jpg'}"><img src='imgProd/thumbs/triumph_thumb2.jpg'></a></li>
 <li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small3.jpg',largeimage: './imgProd/triumph_big3.jpg'}"><img src='imgProd/thumbs/triumph_thumb3.jpg'></a></li>
</ul>

容器标签实际上jqzoom也推荐了ul，并且得带上id为thumblist，至于class则可以不带；而旗下li标签内部的a标签才是关键，之所以无需额外添加js代码，就在于此a标签的玄妙，其第一个有class为zoomThumbActive的，而后面则没有，之所以后面没有，就是jqzoom封包的代码中会自动寻找并遍历接下来的多图，并且唯一一个class为zoomThumActive也是指正在进行放大的图，实际上其他未带的class在a标签在jqzoom中也指定了的，但无需指定；另外可以定义正在进行放大的多图列表中的样式，这个就可以用a.zoomThumbActive来通过css定义了，例如本文第一张图中下方多图切换的第一张图边框为红色即为通过此css筛选器来定义的，而没有进行放大的多图列表中的其他图是不具备zoomThumbActive的class的。到此多图点击切换放大的功能也实现了；文章到此结束！

晶晶在线站长晶晶独家撰写，转载请注明来源！