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($){

$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(fun

补充：web前端 , JavaScript ,