jqzoom源码解读-1

,包含版本申明总代吗量在733行，实际代码量在700行左右

对代码进行紧凑 大概在10行左右 对理解代码有很大的好处
21行与733行的（function($){})（jquery）为编写插件的基本用法 传入jquery的对象（。。）表示在该插件是建立在jquery的基础上 潜台词也即是 在编码的时候肯定是先导入 jquery的文件 理解这句代码明白
1.这是一句匿名的自执行的代码，作为插件会预加载一些方法

2.在jquery等价于，如下在jquery的源码中window.jQuery=window. = jQuery;

3在形参使用主要是为了不和其他的标签库产生冲突（如在jstl中也会使用到 ，之前就会有人问什么是js的问题）

23行：获取版本的信息为ie并且版本<7的时候 将返回值赋给isIE6的变量
对于$.browser的用法存在着一定的争论 对于

  navigator.appCodeName和navigator.appVersion     

将称浏览器想象成为 导航器 水手 航海家 获得版本也即是浏览器的版本 在jquery1.9中剔除了该方法，
换成了support的方法 （具体的问题在下篇文章介绍）

24与25行也即是获得该对象 document.body window的对象
26行 初始化

27行

需要明白
1..fn=.prototype
2.在js中所有的方法都是原型继承 而来
直白点就是在 jquery上定义了一个jqzoom的方法 以后可以直接使用
35行

jqzoom = function（）{}

只是在27行的代码中会用到该函数 （注意区别）

687行 定义一些初始化参数与方法
$.jqzoom ={}

27-34行 也即定义了一个函数 函数的主体方法在jqzoom中
1.注意this的指向的不一样 前一个为jquey对象 后一个为dom元素 在后一个也即是经过筛选的dom中a元素
2.获得节点名称后统一小写 如果为a 则调用jqzoom
3.返回this.each主要是为了 可以直接使用该对象 ,方便进行链式操作 如：$().jqzoom().XXX()等

主要的核心代码在35-686行

35行也即是定义了一个传入两个参数的函数 el和option

jqzoom = function (el, options){}

35-38行 主要对与api的操作

var api = null; 初始api为空
api = $(el).data(“jqzoom”);
if (api) return api;

37行获得含有a标签的（el）data为jqzoom的值

35-52行很明显的即是对其进行依稀额参数的设定具体的作用后面会有介绍，里面唯一需要提到的即是.extend(,.jqzoom.defaults, options || {}); 也即是原型继承 将后面的参数合并到原型继承中去 作为全局对象的参数
具体用法可以参考http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html （原作者版权所有 ，转载所用）

以下为将设为全局后obj输出的结果 可以很明显的看到为jqzoom

57-65行 基本上用到了后面的所有方法

也即是对a标签下第一个 img 的选择
下图为设置后的输出

57-60均是对title的处理，由判断可知优先为是el.title（当然是去掉首尾空格后）
接下来是依次的调用 了 5个的函数 Smallimage（img） Lens（）， Stage（）， Largeimage（）， Loader（）等

接下来也即是依次的解析这5个函数

很明显的既然是放大的效果 ，那么必然会有小图片与大图片 该函数的作用是这个的吗？

首先来看一下 Smallimage 传入的image也即是上面传过来的image集合

其中的this指向smallimage

262行也即是设置了node的值为image[0]

可以猜测 262-317也均是对$obj其进行设置（原因很简单 对于有反回 的函数类型）

findborder

this.findborder = function () {

初始化bordertop的值
btop = ”;初始化btop
将传入image border-left-width的值给borderleft

以上同bordertop ，结果也即是产生了两对的变量 bordertop btop 与borderleft 与bleft，接下来也即是对两个的值进行的处理

substr的参数是 字符位置与字符长度区别（subtstring slice）
isNaN判断是否为非数值 (Not a Number) 不是则返回true ,为数值则返回false
也即是选取bordertop值的前三的值（为数值），而并非和注意中间的‘’符号
例如：123px取得123
border-top-width;
注意该一般属性在border中 border：1px 则为上下左右均为1px,当只有两个值的时候为上下，左右分
具体详见
http://www.w3school.com.cn/tiy/t.asp?f=csse_border-width（版权作者所有，此处只为连接所用，感谢原作者）

同上进行分析
结果在上面已有，回看一下也的确是 findborder

再来看fetchdata 函数

第一句也即是会执行findborder()的函数获得top与left的border

获得图片的大小 宽度（width）和高度(height)

获得outerwidth与outerHeight(也即是包含 padding border margin（true）)
具体的详细如下：

关键在于offset代表的是什么看下图也即可以可以得到并没有包含border(或者client) 到border的border内部（不包含）
offset的大小由offsetparent来决定的
http://www.cnblogs.com/jscode/archive/2012/09/03/2669299.html(版权为原作者所有，此处只作为引用连接，感谢原作者的文章)

上面的代码可能云里雾里的，其实很简单主要是为了获得宽度高度并设置宽度与高度 ，给$obj的元素，并设置限制的宽度与高度的值
以下为基本的坐标 解释为什么要用到left与top的原因 可以使大家更加具体

接下来也即是抛出异常

也即是图片加载完成后执行的函数 ，里面很明显的躺着fetchdata（）函数，可以猜想后面的调用中这个才是关键所在

当没有该类的时候 将obj创建 obj在上面有介绍

接下来是Lens

取得div后添加zoomPup的属性
在zoomPad结尾处添加这个元素并隐藏

settings.zoomType == ‘reverse’
之前子啊extends中添加了该属性 来自
$.jqzoom.defaults

zoomType: ‘standard’,
//innerzoom/standard/reverse/drag

创建一个image并且其src为smallimage

清空zoomPup里面追加gaiimage this也即是lens this.node也即是打击熟悉的zoomPup (实际中为遮罩效果)

el.scale会在largeimage中定义
el.scale = scale;

定义zoomPup的上与左边的值

设置zoomPup的样式

未完待续
YcUstc