ddpowerzoomer.js利用jQuery扩展，实现对图片局部放大功能（源码分析）

当ddpowerzoomer.js加载前，必须在页面导入jquery.xx.js，之后再导ddpowerzoomer.js

下面只讲ddpowerzoomer.js源码加载执行过程

1.文件第一行

jQuery.noConflict()  //防止jQuery冲突
2.文件末行
jQuery(document).ready(function($){ //initialize power zoomer on DOM load
ddpowerzoomer.init($)

})//当ddpowerzoomer.js所在文档加载完成后，执行这一行，初始化用于放大局部图片的dom节点（具体过程见下面）

init:function($){

var $magnifier=$('<div style="position:absolute;width:100px;height:100px;display:none;overflow:hidden;border:1px solid black;" />')//第一个div用于控制局部图片的移动
.append('<div style="position:relative;left:0;top:0;" />')//第二个div 用于存放放大后图片，以及控制该图片的移动
.appendTo(document.body) //将以上两个div添加到html文档内
ddpowerzoomer.$magnifier={outer:$magnifier, inner:$magnifier.find('div:eq(0)'), image:null} //初始化ddpowerzoomer.$magnifier，其中$magnifier，存在局部放大图片所用的所有jquery对象，包含外部的div对象，内部的div对象，以及内部div对象里边存放的图片
$magnifier=ddpowerzoomer.$magnifier
$(document).unbind('mousemove.trackmagnifier').bind('mousemove.trackmagnifier', function(e){ //为文档添加 鼠标移动(mousemove.trackmagnifier) 事件
if (ddpowerzoomer.activeimage){//当鼠标移动到大图片内部时,activeimage不为null
ddpowerzoomer.movemagnifier(e, true)//添加移动事件
}
}) 

$magnifier.outer.bind(ddpowerzoomer.mousewheelevt, function(e){ //为外层div添加  鼠标滚动(FF:DOMMouseScroll；IE:mousewheel) 事件
if (ddpowerzoomer.activeimage){
var delta=e.detail? e.detail*(-120) : e.wheelDelta //鼠标向上滚动 返回+120 鼠标向下滚动 -120
if (delta<=-120){ //zoom out
ddpowerzoomer.movemagnifier(e, false, "out")
}
else{ //zoom in
ddpowerzoomer.movemagnifier(e, false, "in")
}
e.preventDefault() //相当于return false;防止事件往父元素传，在这里是指待放大的图片。
}
})
}

3.jQuery扩展的实现

jQuery.fn.addpowerzoom=function(options){
var $=jQuery
return this.each(function(){ //return jQuery obj
if (this.tagName!="IMG")
return true //skip to next matched element
var $imgref=$(this)
if (this.offsetWidth>0 && this.offsetHeight>0) //if image has explicit CSS width/height defined
ddpowerzoomer.setupimage($, this, options)
else if (this.complete){ //account for IE not firing image.onload
ddpowerzoomer.setupimage($, this, options)
}
else{
$imgref.bind('load', function(){
ddpowerzoomer.setupimage($, this, options)
})
}
})
} //为某一种类型的jQuery对象节点添加addpowerzoom方法。

//如果jQuery对象节点不是一个图片jquery对象，则返回true,不允处理

//否则，在该图片加载完成后，执行ddpowerzoomer对象的setupimage，传入jquery$,当前图片引用this，以及调用addpowerzoom方法时传入的参数列表options
4.setupimage的实现原理

下面讲一下ddpowerzoomer.setupimage的实现原理

setupimage:function($, imgref, options){
var s=jQuery.extend({}, ddpowerzoomer.dsetting, options)//调用jquery内置方法，将调用addpowerzoom时传入的参数覆盖给ddpowerzoomer.dsetting默认设置

  （在这里说明一下：dsetting: {defaultpower:2, powerrange:[2,7], magnifiersize:[75, 75]}各字段的意义，第一个参数defaultpower为放大倍数，

第二个参数powerrange为鼠标滚动时放大，或缩小的范围，第三个参数magnifiersize设定，局部放大的外层div的长，宽 ）
var $imgref=$(imgref)
imgref.info={//为当前IMG jquery对象设置参数，在鼠标移动事件回调函数时用于设计位置所用
power: {current:s.defaultpower, range:s.powerrange},
magdimensions: s.magnifiersize,//同上
dimensions: [$imgref.width(), $imgref.height()],//图片大小
coords: null//记录或保存当前IMG jquery对象，上下左右offset值（即img上下边框离窗口上方的距离，左右边框离窗口左边边框的距离）
}
$imgref.unbind('mouseenter').mouseenter(function(e){ //当鼠标进到当前图片时，调用（初始化一个局部放大图片）
var $magnifier=ddpowerzoomer.$magnifier
$magnifier.outer.css({width:s.magnifiersize[0], height:s.magnifiersize[1]}) //设置外div长宽
var offset=$imgref.offset() 
var power=imgref.info.power.current
$magnifier.inner.html('<img src="'+$imgref.attr('src')+'"/>') //为内div添加img，该 img跟原图片src一样，只是长度不一样，视放大倍power的值而定
$magnifier.image=$magnifier.outer.find('img:first').css({width:imgref.info.dimensions[0]*power, height:imgref.info.dimensions[1]*power}) //放大内div里边的img
var coords={left:offset.left, top:offset.top, right:offset.left+imgref.info.dimensions[0], bottom:offset.top+imgref.info.dimensions[1]}//初始化coords，作用上面讲了
imgref.info.coords=coords 
$magnifier.outer.show()//显示并将当前img引用置给ddpowerzoomer.activeimage
ddpowerzoomer.activeimage=imgref
})
}

5.ddpowerzoomer.movemagnifier 鼠标移动回调函数的实现原理

movemagnifier:function(e, moveBol, zoomdir){//事件e,是否鼠标移动，鼠标gun动方式（‘in' or 'out'）
var activeimage=ddpowerzoomer.activeimage //获取当前待放大的图片
var activeimginfo=activeimage.info//当前图片的参数，由setupimage函数初始化的
var coords=activeimginfo.coords//当前图片的各种边距
var $magnifier=ddpowerzoomer.$magnifier
var magdimensions=activeimginfo.magdimensions //获取局部放大 外div的大小
var power=activeimginfo.power.current //当前放大位数
var powerrange=activeimginfo.power.range //缩放的范围
var x=e.pageX-coords.left //获取鼠标点跑离    当前待放大图   的水平，垂直宽度
var y=e.pageY-coords.top
if (moveBol==true){   //移动时
if (e.pageX>=coords.left && e.pageX<=coords.right && e.pageY>=coords.top && e.pageY<=coords.bottom) //定位  外div 的位置
$magnifier.outer.css({left:e.pageX-magdimensions[0]/2, top:e.pageY-magdimensions[1]/2}) //move magnifier so it follows the cursor
else{ //鼠标超过了待放大图片的边框时，隐藏外div ,当前图片引用为null
ddpowerzoomer.activeimage=null
$magnifier.outer.hide() //hide magnifier
}
}
else if (zoomdir){ //缩放时
var od=activeimginfo.dimensions //get dimensions of image
var newpower=(zoomdir=="in")? Math.min(power+1, powerrange[1]) : Math.max(power-1, powerrange[0]) //节取缩放的倍数
var nd=[od[0]*newpower, od[1]*newpower] 
$magnifier.image.css({width:nd[0], height:nd[1]})//缩放处理（处理      内div 里边 img的witdh,height）
activeimginfo.power.current=newpower //保存放大的倍数
}
power=activeimginfo.power.current 
var newx=-x*power+magdimensions[0]/2 //计算内div里边img的位置
var newy=-y*power+magdimensions[1]/2
$magnifier.inner.css({left:newx, top:newy}) //显示计算出来的位置 
}


效果如下：

 

调用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片放大镜效果</title>
</head>
<body>
<script type='text/javascript' src="./jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="ddpowerzoomer.js"></script>
<script type="text/javascript">
jQuery(function($){ //fire on DOM ready
 $('img.gallery').addpowerzoom({magnifiersize:[100,100]})
})
</script>
</head>
<body>
<div align="center">
<img class="gallery" border="0" src="beach.jpg" style="width:290px;height:180px">
</div>
</div>
</body>
</html>

注：老外写的代码，就是比chinese写的，要容易看得多，至少，他们注释得足够好！！！