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写的，要容易看得多，至少，他们注释得足够好！！！