<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<script>
function test(e){ alert(e.type+":"+e.detail+"_"+e.wheelDelta) }
document.addEventListener( "DOMMouseScroll", test, false );
document.addEventListener( "mousewheel", test, false );
</script>
</body>
</html>
向下滚动一下，可以得到以下结果：
ff：DOMMouseScroll:3_undefined
opera：mousewheel:3_-120
chrome/safari：mousewheel:0_-120
可以看到事件的绑定，ff只支持DOMMouseScroll，其他就只支持mousewheel。
而滚动参数的获取，ff只支持detail，opera两种都支持，chrome/safari就支持wheelDelta。
ps：不明白chrome/safari的detail为什么是0，有其他用途？
而DOMMouseScroll跟mousewheel还有一个不同是前者不能直接绑定元素，后者可以。
即可以elem.onmousewheel，但不能elem.onDOMMouseScroll。
根据以上分析，在_start程序里是这样把_mouse程序绑定到document的滚动事件中：
this.mouse && $$E.addEvent( document, $$B.firefox ? "DOMMouseScroll" : "mousewheel", this._MOUSE );
在_mouse程序里面根据滚动参数和自定义的rate缩放比率得到新的放大比例：
this._scale += ( e.wheelDelta ? e.wheelDelta / (-120) : (e.detail || 0) / 3 ) * this.rate;
修改比例时，程序参数也需要重新计算。
由于_rangeWidth/_rangeHeight会影响计算的过程，要重新恢复成自定义的默认值：
var opt = this.options;
this._rangeWidth = opt.rangeWidth;
this._rangeHeight = opt.rangeHeight;
然后执行_initSize和_initData重新设置尺寸和参数，再执行_move重新定位。
最后记得用preventDefault防止触发页面滚动。
使用技巧
【图片设置】
程序支持大图使用原图放大或用新大图。
如果用新大图而且图片比较大的话，强烈建议设置放大比例，这样程序会自动在大图载入前先使用原图放大，这样就不用等待大图加载完成。
还要注意新大图本身的宽高比例要跟原图一致，否则就对不准坐标了，使用原图放大就没有这个问题。
【显示框设置】
有两个方法可以设置显示框的尺寸：
要固定显示范围的话，先设置rangeWidth/rangeHeight，程序会根据显示范围和放大比例计算显示框的尺寸；
要用显示框当前的尺寸来显示的话，只要不设置rangeWidth/rangeHeight或设为0就可以了。
【reset】
由于各个属性和对象之间有很多的关联，很多属性不能直接修改。
程序设置了一个reset方法专门用来修改这类属性的。
如果程序加载完成后又修改了影响程序计算的样式，例如原图大小，显示框大小等，也要执行一次reset来重新设置参数和属性。
【浮动定位】
程序没有设置显示框浮动定位的功能，需要的话可以自行添加。
简单的定位可以参考实例的方法，还要小心覆盖select的问题。
如果要更复杂的浮动定位，可以参考“浮动定位提示效果”。
【opera的bug】
测试中发现opera 10.10有两个bug。
分别是img元素设置透明时会看到背景图，用js修改鼠标样式会有问题。
不过这两个问题在10.50都已经修复了，还没升级的赶快升啦。
【maxthon的bug】
用maxthon 2.5.1测试时发现一个问题，测试以下代码：
复制代码 代码如下:
<div></div>
<script>
var t=document.getElementById("t");
t.clientWidth;
t.style.display="none";
alert(t.clientWidth);
</script>
一般来说用display隐藏后，clientWidth应该是0的，但maxthon貌似没有处理这个情况。
这会影响到程序中clientWidth的判断，不过对一般使用没什么影响。
我已经提交了这个问题，不知会不会处理。
使用说明
实例化时，必须有一个img元素作为原图对象，和一个容器作为显示框：
var iz = new ImageZoom( "idImage", "idViewer" );
可选参数用来设置系统的默认属性，包括：
属性: 默认值//说明
mode: "simple",//模式
scale: 0,//比例(大图/原图)
max: 10,//最大比例
min: 1.5,//最小比例
originPic: "",//原图地址
zoomPic: "",//大图地址
rangeWidth: 0,//显示范围宽度
rangeHeight:0,//显示范围高度
delay: 20,//延迟结束时间
autoHide: true,//是否自动隐藏
mouse: false,//鼠标缩放
rate: .2,//鼠标缩放比率
onLoad: $$.emptyFunction,//加载完成时执行
onStart: $$.emptyFunction,//开始放大时执行
onMove: $$.emptyFunction,//放大移动时执行
onEnd: $$.emptyFunction//放大结束时执行
其中模式的使用在下一篇扩展篇再说明。
初始化后，scale、max、min、originPic、zoomPic、rangeWidth、rangeHeight这些属性需要用reset方法来修改。
还提供了以下方法：
start：开始放大程序（程序会自动执行）；
stop：停止放大程序；
reset：修改设置；
dispose：销毁程序。
程序源码
复制代码 代码如下: