完美者（wmzhe.com）网站以软件下载为基础，改版后的网站对功能性板块进行扩充，以期能够解决用户在软件使用过程中遇见的所有问题。网站新增了“软件百科”、“锦囊妙技”等频道，可以更好地对用户的软件使用全周期进行更加专业地服务。
专门用来设计材质的工具，它可以设计出非常多样化的材质图形，可应用於网页背景底图、软体面板、小图示等等，内建 50 种以上的命令列特效指令，让你快速制作出酷炫材质！档案副档名为 *.isf，可汇出为 *.bmp 图形档。"锦囊妙技"栏目是聚合全网软件使用的技巧或者软件使用过程中各种问题的解答类文章，栏目设立伊始，小编欢迎各路软件大神朋友们踊跃投稿，在完美者平台分享大家的独门技巧。
本站文章素材来源于网络，大部分文章作者名称佚失，为了更利于用户阅读和使用，根据需要进行了重新排版和部分改编，本站收录文章只是以帮助用户解决实际问题为目的，如有版权问题请联系小编修改或删除，谢谢合作。
软件大小：5.42 MB
这样试试看看行不行.element.style.backgroundImage 是获取元62616964757a686964616fe59b9ee7ad9431333365643537素style属性的样式，例如获取css的方式是window.getComputedStyle
好像没有这个事件，不过有BackgroundImageChanged 这个事件，背景图片改变时，会触发这个事件，所以你设置图片的时候用 BackgroundImage = 而不要用Image =，这样 BackgroundImage 改变的时候就会触发BackgroundImageChanged 这个事件。还有一个方法就是自己从Control继承，做一个控件，在控件的构造函数里加一个下面的代码：SetStyle(ControlStyles.AllPaintingInWmPaint|ControlStyles.OptimizedDoubleBuffer);
主要扩展了原图和显示框的展示模式，有以下几种模式： "follow" 跟随模式：显示框能跟随鼠标移动的效果； "handle" 拖柄模式：原图上有一个拖柄来标记显示范围； "cropper" 切割模式：原图用不透明的来标记显示范围，其他部分用半透明显示； "handle-cropper" 拖柄切割模式：拖柄模式和切割模式的混合版，同时用透明度和拖柄来标记显示范围。 当然更多的扩展等待你的想象力来发掘。 兼容：ie6/7/8, firefox 3.6.2, opera 10.51, safari 4.0.4, chrome 4.1 程序说明 【扩展模式】 上次ImagesLazyLoad使用了继承做扩展，这次用插件的形式来做扩展。 先看看基础模式，这些模式是保存在ImageZoom._MODE中的，类似这样的结构： 复制代码 代码如下: ImageZoom._MODE = { 模式名: { options: { ... }, methods: { init: function() { ... }, ... } }, ... } 其中模式名就是基础模式的名字，options是可选参数扩展，methods是程序结构的扩展。 基础模式包含"follow", "handle"和"cropper"模式，后面再详细介绍。 methods包含要扩展的钩子程序，是扩展的主要部分。 ps：这里说的模式不是“设计模式”里面的模式。 扩展需要在程序初始化时进行，要放在_initialize程序之前执行。 为了不影响原程序的结构，这里用织入法在_initialize之前插入一段程序： 复制代码 代码如下: ImageZoom.prototype._initialize = (function(){ var init = ImageZoom.prototype._initialize, ...; return function(){ ... init.apply( this, arguments ); } })(); 原理就是先保存原来的函数，插入一段程序组成新函数，然后重新替换原来的函数。 考虑到组合基础模式的情况，使用了一个对象保存真正使用的模式： 复制代码 代码如下: mode = ImageZoom._MODE, modes = { "follow": [ mode.follow ], "handle": [ mode.handle ], "cropper": [ mode.cropper ], "handle-cropper": [ mode.handle, mode.cropper ] }; 可以看到"handle-cropper"模式其实就是"handle"和"cropper"的组合模式。 插入的程序的主要任务是根据设定好的基础模式，进行扩展： 复制代码 代码如下: var options = arguments[2]; if ( options && options.mode && modes[ options.mode ] ) { $$A.forEach( modes[ options.mode ], function( mode ){ $$.extend( options, mode.options, false ); $$A.forEach( mode.methods, function( method, name ){ $$CE.addEvent( this, name, method ); }, this ); }, this ); } 首先扩展options可选参数对象，由于可选参数是第三个参数，所以用arguments[2]获取。 extend的第三个参数设为false，说明不重写相同属性，即保留自定义的属性值。 然后把methods里面的方法作为钩子函数逐个添加到程序中。 methods可以包含init, load, start, repair, move, end, dispose这几个方法，分别对应ImageZoom中初始化、加载、开始、修正、移动、结束和销毁事件。 在扩展时，不同的事件执行不同的任务： init初始化函数：用来设置扩展需要的属性，注意这些属性不要跟ImageZoom本身的属性冲突了，即重名。 load加载函数：图片加载完成，相关参数也设置完成，主要做执行放大效果前的准备工作。 start开始函数：触发放大效果时执行的。 repair修正函数：用于修正大图定位的坐标值。 move移动函数：触发放大效果后，鼠标移动时执行的。 end结束函数就：结束放大效果时执行的。 dispose销毁函数：在移除程序时清理程序的。 ps：具体位置参考ImageZoom中使用$$CE.fireEvent的部分。 可以看到这里用了织入法（weave）和钩子法（hook）对程序做扩展。 织入法是一种aop，可以在不改变原程序的基础上进行扩展，但只能在函数前面或后面加入程序。 而钩子法必须在原程序中设置好对应钩子才能配合使用，但位置相对灵活。 【跟随模式】 在"follow"跟随模式中，进行放大时，显示框会跟随鼠标移动，就像拿着放大镜看的效果。 首先显示框要绝对定位，要实现显示框跟随鼠标移动，只要在move中设置对应的left/top就行了： var style = this._viewer.style; style.left = e.pageX - this._repairFollowLeft + "px"; style.top = e.pageY - this._repairFollowTop + "px"; 其中pageX/pageY是鼠标当前的坐标，_repairFollowLeft/_repairFollowTop是坐标的修正参数。 修正参数是在load中设置的，如果显示框隐藏的话，用上一篇获取显示范围的方法获取参数： 复制代码 代码如下: if ( !viewer.offsetWidth ) { styles = { display: style.display, visibility: style.visibility }; $$D.setStyle( viewer, { display: "block", visibility: "hidden" }); } ... if ( styles ) { $$D.setStyle( viewer, styles ); } 为了跟随时，让鼠标固定在显示框中心位置，先根据显示框的offsetWidth/offsetHeight修正参数： 复制代码 代码如下: this._repairFollowLeft = viewer.offsetWidth / 2; this._repairFollowTop = viewer.offsetHeight / 2; 如果显示框的offsetParent不是body，还需要根据offsetParent修正坐标： 复制代码 代码如下: if ( !/BODY|HTML/.test( viewer.offsetParent.nodeName ) ) { var parent = viewer.offsetParent, rect = $$D.rect( parent ); this._repairFollowLeft += rect.left + parent.clientLeft; this._repairFollowTop += rect.top + parent.clientTop; } ps：在Maxthon测试时发现body子元素的offsetParent不是body而是html。 为了在移除程序后，能恢复显示框的样式，在load程序中做了样式的备份： 复制代码 代码如下: var viewer = this._viewer, style = viewer.style, styles; this._stylesFollow = { left: style.left, top: style.top, position: style.position }; 并在dispose中恢复： $$D.setStyle( this._viewer, this._stylesFollow ); 现在已经达到了基本的效果，但由于大图移动范围的限制，当鼠标移动到接近边界时，大图就卡住不会动了。 为了实现在鼠标移动时，大图会持续变化的效果，在repair中修正了移动坐标： 复制代码 代码如下: pos.left = ( viewerWidth / 2 - pos.left ) * ( viewerWidth / zoom.width - 1 ); pos.top = ( viewerHeight / 2 - pos.top ) * ( viewerHeight / zoom.height - 1 ); 原理稍有些复杂，以水平坐标为例，先看下图： 大方框代表大图对象，小方框代表显示框。 当前位置是根据鼠标坐标得到的实际显示的位置，目标位置想要实现效果的位置。 有一些物理或几何知识应该明白这个等式：x / y = m / n 可以推出：y = x * n / m = x * ( zoom.width - viewerWidth ) / zoom.height x当前坐标可以通过pos.left来得到：x = viewerWidth / 2 - pos.left 最后得到:left = -y = ( viewerWidth / 2 - pos.left ) * ( viewerWidth / zoom.width - 1 ) 垂直坐标也差不多。 【拖柄模式】 拖柄是一个层，在原图上面，用来表示显示范围在原图的位置和范围。 显示范围可以根据_rangeWidth/_rangeHeight获取。 至于位置的指定可以根据鼠标坐标或大图定位坐标来设置。 如果鼠标坐标的话还必须做其他处理，例如范围控制，而根据大图定位坐标相对就方便准确得多，程序也是用后面一个方法。 首先在init定义一个_handle拖柄对象： 复制代码 代码如下: var handle = $$( this.options.handle ); if ( !handle ) { var body = document.body; handle = body.insertBefore(this._viewer.cloneNode(false), body.childNodes[0]); handle.id = ""; handle["_createbyhandle"] = true; } $$D.setStyle( handle, { padding: 0, margin: 0, display: "none" } ); 如果没有自定义拖柄对象，会复制显示框作为拖柄对象。 对于自动生成的拖柄对象，会添加"_createbyhandle"属性作标记，方便在dispose中移除。 在load时，设置拖柄样式： 复制代码 代码如下: $$D.setStyle( handle, { position: "absolute", width: this._rangeWidth + "px", height: this._rangeHeight + "px", display: "block", visibility: "hidden" }); 绝对定位是必须的，并根据_rangeWidth/_rangeHeight设置尺寸。 设置display和visibility是为了下面获取参数。 先根据原图坐标获取修正参数： this._repairHandleLeft = rect.left + this._repairLeft - handle.clientLeft; this._repairHandleTop = rect.top + this._repairTop - handle.clientTop; 和跟随模式类似，也要做offsetParent定位的修正： 复制代码 代码如下: if ( handle.offsetParent.nodeName.toUpperCase() != "BODY" ) { var parent = handle.offsetParent, rect = $$D.rect( parent ); this._repairHandleLeft -= rect.left + parent.clientLeft; this._repairHandleTop -= rect.top + parent.clientTop; } 然后重新隐藏： $$D.setStyle( handle, { display: "none", visibility: "visible" }); 在start时，显示拖柄对象。 在move时，根据大图定位坐标设置拖柄定位： 复制代码 代码如下: var style = this._handle.style, scale = this._scale; style.left = Math.ceil( this._repairHandleLeft - x / scale ) + "px"; style.top = Math.ceil( this._repairHandleTop - y / scale ) + "px"; 在end时，隐藏拖柄对象。 【切割模式】 “切割”就是选择的部分全透明，其他部分半透明的效果。 主要通过clip来实现，具体原理可以看图片切割效果。 为了实现切割效果，需要在init中新建一个_cropper切割层： 复制代码 代码如下: var body = document.body, cropper = body.insertBefore(document.createElement("img"), body.childNodes[0]); cropper.style.display = "none"; 并在load中设置这个切割层： 复制代码 代码如下: cropper.src = image.src; cropper.width = image.width; cropper.height = image.height; $$D.setStyle( cropper, { position: "absolute", left: rect.left + this._repairLeft + "px", top: rect.top + this._repairTop + "px" }); 差不多是复制一个原图对象，并且绝对定位到原图对象上面。 在start时，显示切割层，并根据透明度设置原图为半透明状态。 在move时，根据大图移动的坐标设置切割层要clip的范围： 复制代码 代码如下: var w = this._rangeWidth, h = this._rangeHeight, scale = this._scale; x = Math.ceil( -x / scale ); y = Math.ceil( -y / scale ); this._cropper.style.clip = "rect(" + y + "px " + (x + w) + "px " + (y + h) + "px " + x + "px)"; 在end时，隐藏切割层，并重新设置原图为不透明，来恢复原来的状态。 还要记得在dispose中移除切割层。 使用技巧 需要扩展的效果时才需要添加这个扩展程序。 可自行对ImageZoom._MODE进行扩展，扩展后记得在modes添加对应模式。 可以组合多个基础模式同时使用，具体参考"handle-cropper"模式。 使用说明 使用方法跟ImageZoom差不多，只是多了一个可选参考mode设置显示模式。 使用"handle"模式时，可选参数的"handle"属性可以设置拖柄对象。 使用"cropper"模式时，可选参数的"opacity"属性可以设置透明度。 使用"handle-cropper"模式时，以上两个参数都可以使用。 程序源码 复制代码 代码如下: ImageZoom._MODE = { //跟随 "follow": { methods: { init: function() { this._stylesFollow = null;//备份样式 this._repairFollowLeft = 0;//修正坐标left this._repairFollowTop = 0;//修正坐标top }, load: function() { var viewer = this._viewer, style = viewer.style, styles; this._stylesFollow = { left: style.left, top: style.top, position: style.position }; viewer.style.position = "absolute"; //获取修正参数 if ( !viewer.offsetWidth ) {//隐藏 styles = { display: style.display, visibility: style.visibility }; $$D.setStyle( viewer, { display: "block", visibility: "hidden" }); } //修正中心位置 this._repairFollowLeft = viewer.offsetWidth / 2; this._repairFollowTop = viewer.offsetHeight / 2; //修正offsetParent位置 if ( !/BODY|HTML/.test( viewer.offsetParent.nodeName ) ) { var parent = viewer.offsetParent, rect = $$D.rect( parent ); this._repairFollowLeft += rect.left + parent.clientLeft; this._repairFollowTop += rect.top + parent.clientTop; } if ( styles ) { $$D.setStyle( viewer, styles ); } }, repair: function(e, pos) { var zoom = this._zoom, viewerWidth = this._viewerWidth, viewerHeight = this._viewerHeight; pos.left = ( viewerWidth / 2 - pos.left ) * ( viewerWidth / zoom.width - 1 ); pos.top = ( viewerHeight / 2 - pos.top ) * ( viewerHeight / zoom.height - 1 ); }, move: function(e) { var style = this._viewer.style; style.left = e.pageX - this._repairFollowLeft + "px"; style.top = e.pageY - this._repairFollowTop + "px"; }, dispose: function() { $$D.setStyle( this._viewer, this._stylesFollow ); } } }, //拖柄 "handle": { options: {//默认值 handle: ""//拖柄对象 }, methods: { init: function() { var handle = $$( this.options.handle ); if ( !handle ) {//没有定义的话用复制显示框代替 var body = document.body; handle = body.insertBefore(this._viewer.cloneNode(false), body.childNodes[0]); handle.id = ""; handle["_createbyhandle"] = true;//生成标识用于移除 } $$D.setStyle( handle, { padding: 0, margin: 0, display: "none" } ); this._handle = handle; this._repairHandleLeft = 0;//修正坐标left this._repairHandleTop = 0;//修正坐标top }, load: function() { var handle = this._handle, rect = this._rect; $$D.setStyle( handle, { position: "absolute", width: this._rangeWidth + "px", height: this._rangeHeight + "px", display: "block", visibility: "hidden" }); //获取修正参数 this._repairHandleLeft = rect.left + this._repairLeft - handle.clientLeft; this._repairHandleTop = rect.top + this._repairTop - handle.clientTop; //修正offsetParent位置 if ( !/BODY|HTML/.test( handle.offsetParent.nodeName ) ) { var parent = handle.offsetParent, rect = $$D.rect( parent ); this._repairHandleLeft -= rect.left + parent.clientLeft; this._repairHandleTop -= rect.top + parent.clientTop; } //隐藏 $$D.setStyle( handle, { display: "none", visibility: "visible" }); }, start: function() { this._handle.style.display = "block"; }, move: function(e, x, y) { var style = this._handle.style, scale = this._scale; style.left = Math.ceil( this._repairHandleLeft - x / scale ) + "px"; style.top = Math.ceil( this._repairHandleTop - y / scale ) + "px"; }, end: function() { this._handle.style.display = "none"; }, dispose: function() { if( "_createbyhandle" in this._handle ){ document.body.removeChild( this._handle ); } this._handle = null; } } }, //切割 "cropper": { options: {//默认值 opacity: .5//透明度 }, methods: { init: function() { var body = document.body, cropper = body.insertBefore(document.createElement("img"), body.childNodes[0]); cropper.style.display = "none"; this._cropper = cropper; this.opacity = this.options.opacity; }, load: function() { var cropper = this._cropper, image = this._image, rect = this._rect; cropper.src = image.src; cropper.width = image.width; cropper.height = image.height; $$D.setStyle( cropper, { position: "absolute", left: rect.left + this._repairLeft + "px", top: rect.top + this._repairTop + "px" }); }, start: function() { this._cropper.style.display = "block"; $$D.setStyle( this._image, "opacity", this.opacity ); }, move: function(e, x, y) { var w = this._rangeWidth, h = this._rangeHeight, scale = this._scale; x = Math.ceil( -x / scale ); y = Math.ceil( -y / scale ); this._cropper.style.clip = "rect(" + y + "px " + (x + w) + "px " + (y + h) + "px " + x + "px)"; }, end: function() { $$D.setStyle( this._image, "opacity", 1 ); this._cropper.style.display = "none"; }, dispose: function() { document.body.removeChild( this._cropper ); this._cropper = null; } } } } ImageZoom.prototype._initialize = (function(){ var init = ImageZoom.prototype._initialize, mode = ImageZoom._MODE, modes = { "follow": [ mode.follow ], "handle": [ mode.handle ], "cropper": [ mode.cropper ], "handle-cropper": [ mode.handle, mode.cropper ] }; return function(){ var options = arguments[2]; if ( options && options.mode && modes[ options.mode ] ) { $$A.forEach( modes[ options.mode ], function( mode ){ //扩展options $$.extend( options, mode.options, false ); //扩展钩子 $$A.forEach( mode.methods, function( method, name ){ $$CE.addEvent( this, name, method ); }, this ); }, this ); } init.apply( this, arguments ); } })();在线演示地址http://demo.jb51.net/js/ImageZoom_ext/ImageZoom_ext.htm打包下载地址http://www.jb51.net/jiaoben/25809.html出处：http://www.cnblogs.com/cloudgamer/
一般用于放大查看商品图片，在凡客，京东商城，阿里巴巴等都有类似的效果。 好处是能在原图附近对图片进行局部放大查看，而且可以通过鼠标控制查看的部位。 前一阵子看到sohighthesky的图片放大效果，心血来潮自己也写一个看看。 这个程序有以下特点： 1，支持使用原图放大或新图片设置大图； 2，大图完成载入前使用原图放大代替，减少操作等待时间； 3，支持鼠标滚动缩放大图； 4，可以通过设置显示范围或显示框大小设置显示尺寸； 5，可以设置是否自动隐藏显示框； 6，支持插件形式的扩展来实现更多的功能（下一篇再详细介绍）。 兼容：ie6/7/8, firefox 3.6.2, opera 10.51, safari 4.0.4, chrome 4.1 复制代码 代码如下: var styles; if ( !viewer.clientWidth ) { var style = viewer.style; styles = { display: style.display, position: style.position, visibility: style.visibility }; $$D.setStyle( viewer, { display: "block", position: "absolute", visibility: "hidden" }); } this._viewerWidth = viewer.clientWidth; this._viewerHeight = viewer.clientHeight; if ( styles ) { $$D.setStyle( viewer, styles ); } rangeWidth = Math.ceil( this._viewerWidth / scale ); rangeHeight = Math.ceil( this._viewerHeight / scale ); 注意，显示范围是通过clientWidth/clientHeight来获取的。 如果显示框是display为none的隐藏状态，就不能直接获取clientWidth/clientHeight。 这种情况下，程序用以下方法获取： 1，记录display/position/visibility的原始值； 2，分别设为"block"/"absolute"/"hidden"，这是既能隐藏也能占位的状态； 3，获取参数； 4，重新设回原始值，恢复原来的状态。 得到显示范围后，再配合比例就能得到范围参数了。 ps：这是通用的获取不占位元素尺寸参数的方法，jquery的css也是用这个方法获取width/height的。 比例计算后可能会得到小数，而尺寸大小只能是整数，程序一律使用Math.ceil来取整。 【放大效果】 所有东西都设置好后，就可以执行start设置触发程序了。 程序会自动执行start方法，里面主要是给原图对象的mouseover/mousemove绑定_start程序： var image = this._image, START = this._START; $$E.addEvent( image, "mouseover", START ); $$E.addEvent( image, "mousemove", START ); 分别对应移入原图对象和在原图对象上移动的情况。 ps：如果使用attachEvent的话还要注意重复绑定同一函数的问题，这里的addEvent就没有这个问题。 绑定的_start程序，主要是进行一些事件的解绑和绑定： 复制代码 代码如下: $$E.removeEvent( image, "mouseover", this._START ); $$E.removeEvent( image, "mousemove", this._START ); $$E.addEvent( document, "mousemove", this._MOVE ); $$E.addEvent( document, "mouseout", this._OUT ); 为了在移出窗口时能结束放大效果，给document的mouseout绑定了_OUT程序： 复制代码 代码如下: this._OUT = $$F.bindAsEventListener( function(e){ if ( !e.relatedTarget ) this._END(); }, this ); 当鼠标移出document会触发mouseout，如果当前relatedTarget是null的话，就延时执行_end结束程序： var oThis = this, END = function(){ oThis._end(); }; this._END = function(){ oThis._timer = setTimeout( END, oThis.delay ); }; 在_end程序中，会先执行stop方法，在里面移除所有可能绑定的事件，再执行start方法继续等待触发。 而mousemove绑定的_move移动程序，主要用来实现鼠标移动到哪里就放大哪里的功能。 为适应更多的情况（例如扩展篇的其他模式），把它绑定到document上，但也因此不能用mouseout事件来触发移出程序。 程序通过鼠标和原图的坐标比较，来判断鼠标是否移出原图对象范围： 复制代码 代码如下: var x = e.pageX, y = e.pageY, rect = this._rect; if ( x < rect.left || x > rect.right || y < rect.top || y > rect.bottom ) { this._END(); } else { ... } 如果鼠标移出原图对象的话，就执行_END结束放大效果。 如果鼠标在原图对象上移动，就计算坐标，并通过_repair程序把坐标转化成定位需要的值。 最后设置大图的left/top定位使显示框显示要放大的部位。 ps：我尝试过用scrollLeft/scrollTop来做定位，但发现这样在ie中会像锯齿那样移动，放得越大越明显，所以放弃。 【鼠标滚动缩放】 如果设置mouse属性为true，就会开启鼠标滚动缩放功能。 在执行放大效果期间，可以通过滚动鼠标滚轮对大图进行缩放处理。 其实就是根据滚轮动参数的变化来修改放大比例。 关于鼠标滚动事件，在slider中也提过，不过那时只分析了ie和ff的区别，这里再分析一下。 首先ie是用mousewheel绑定事件的，使用event的wheelDelta来获取滚动参数。 其他浏览器用以下代码测试： 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <body style="height:1000px;"> <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 id="t" style="width:50px;"></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：销毁程序。 程序源码 复制代码 代码如下: var ImageZoom = function(image, viewer, options) { this._initialize( image, viewer, options ); this._initMode( this.options.mode ); this._oninit(); this._initLoad(); }; ImageZoom.prototype = { //初始化程序 _initialize: function(image, viewer, options) { this._image = $$(image);//原图 this._zoom = document.createElement("img");//显示图 this._viewer = $$(viewer);//显示框 this._viewerWidth = 0;//显示框宽 this._viewerHeight = 0;//显示框高 this._preload = new Image();//预载对象 this._rect = null;//原图坐标 this._repairLeft = 0;//显示图x坐标修正 this._repairTop = 0;//显示图y坐标修正 this._rangeWidth = 0;//显示范围宽度 this._rangeHeight = 0;//显示范围高度 this._timer = null;//计时器 this._loaded = false;//是否加载 this._substitute = false;//是否替换 var opt = this._setOptions(options); this._scale = opt.scale; this._max = opt.max; this._min = opt.min; this._originPic = opt.originPic; this._zoomPic = opt.zoomPic; this._rangeWidth = opt.rangeWidth; this._rangeHeight = opt.rangeHeight; this.delay = opt.delay; this.autoHide = opt.autoHide; this.mouse = opt.mouse; this.rate = opt.rate; this.onLoad = opt.onLoad; this.onStart = opt.onStart; this.onMove = opt.onMove; this.onEnd = opt.onEnd; var oThis = this, END = function(){ oThis._end(); }; this._END = function(){ oThis._timer = setTimeout( END, oThis.delay ); }; this._START = $$F.bindAsEventListener( this._start, this ); this._MOVE = $$F.bindAsEventListener( this._move, this ); this._MOUSE = $$F.bindAsEventListener( this._mouse, this ); this._OUT = $$F.bindAsEventListener( function(e){ if ( !e.relatedTarget ) this._END(); }, this ); }, //设置默认属性 _setOptions: function(options) { this.options = {//默认值 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//放大结束时执行 }; return $$.extend(this.options, options || {}); }, //根据模式初始化函数属性 _initMode: function(mode) { mode = $$.extend({ options:{}, init: $$.emptyFunction, load: $$.emptyFunction, start: $$.emptyFunction, end: $$.emptyFunction, move: $$.emptyFunction, dispose:$$.emptyFunction }, (ImageZoom._MODE || {})[ mode.toLowerCase() ] || {} ); this.options = $$.extend( mode.options, this.options ); this._oninit = mode.init; this._onload = mode.load; this._onstart = mode.start; this._onend = mode.end; this._onmove = mode.move; this._ondispose = mode.dispose; }, //初始化加载 _initLoad: function() { var image = this._image, originPic = this._originPic, useOrigin = !this._zoomPic && this._scale, loadImage = $$F.bind( useOrigin ? this._loadOriginImage : this._loadImage, this ); //设置自动隐藏 if ( this.autoHide ) { this._viewer.style.display = "none"; } //先加载原图 if ( originPic && originPic != image.src ) {//使用自定义地址 image.onload = loadImage; image.src = originPic; } else if ( image.src ) {//使用元素地址 if ( !image.complete ) {//未载入完 image.onload = loadImage; } else {//已经载入 loadImage(); } } else { return;//没有原图地址 } //加载大图 if ( !useOrigin ) { var preload = this._preload, zoomPic = this._zoomPic || image.src, loadPreload = $$F.bind( this._loadPreload, this ); if ( zoomPic != preload.src ) {//新地址重新加载 preload.onload = loadPreload; preload.src = zoomPic; } else {//正在加载 if ( !preload.complete ) {//未载入完 preload.onload = loadPreload; } else {//已经载入 this._loadPreload(); } } } }, //原图放大加载程序 _loadOriginImage: function() { this._image.onload = null; this._zoom.src = this._image.src; this._initLoaded(); }, //原图加载程序 _loadImage: function() { this._image.onload = null; if ( this._loaded ) {//大图已经加载 this._initLoaded(); } else { this._loaded = true; if ( this._scale ) {//有自定义比例才用原图放大替换大图 this._substitute = true; this._zoom.src = this._image.src; this._initLoaded(); } } }, //大图预载程序 _loadPreload: function() { this._preload.onload = null; this._zoom.src = this._preload.src; if ( this._loaded ) {//原图已经加载 //没有使用替换 if ( !this._substitute ) { this._initLoaded(); } } else { this._loaded = true; } }, //初始化加载设置 _initLoaded: function(src) { //初始化显示图 this._initSize(); //初始化显示框 this._initViewer(); //初始化数据 this._initData(); //开始执行 this._onload(); this.onLoad(); this.start(); }, //初始化显示图尺寸 _initSize: function() { var zoom = this._zoom, image = this._image, scale = this._scale; if ( !scale ) { scale = this._preload.width / image.width; } this._scale = scale = Math.min( Math.max( this._min, scale ), this._max ); //按比例设置显示图大小 zoom.width = Math.ceil( image.width * scale ); zoom.height = Math.ceil( image.height * scale ); }, //初始化显示框 _initViewer: function() { var zoom = this._zoom, viewer = this._viewer; //设置样式 var styles = { padding: 0, overflow: "hidden" }, p = $$D.getStyle( viewer, "position" ); if ( p != "relative" && p != "absolute" ){ styles.position = "relative"; }; $$D.setStyle( viewer, styles ); zoom.style.position = "absolute"; //插入显示图 if ( !$$D.contains( viewer, zoom ) ){ viewer.appendChild( zoom ); } }, //初始化数据 _initData: function() { var zoom = this._zoom, image = this._image, viewer = this._viewer, scale = this._scale, rangeWidth = this._rangeWidth, rangeHeight = this._rangeHeight; //原图坐标 this._rect = $$D.rect( image ); //修正参数 this._repairLeft = image.clientLeft + parseInt($$D.getStyle( image, "padding-left" )); this._repairTop = image.clientTop + parseInt($$D.getStyle( image, "padding-top" )); //设置范围参数和显示框大小 if ( rangeWidth > 0 && rangeHeight > 0 ) { rangeWidth = Math.ceil( rangeWidth ); rangeHeight = Math.ceil( rangeHeight ); this._viewerWidth = Math.ceil( rangeWidth * scale ); this._viewerHeight = Math.ceil( rangeHeight * scale ); $$D.setStyle( viewer, { width: this._viewerWidth + "px", height: this._viewerHeight + "px" }); } else { var styles; if ( !viewer.clientWidth ) {//隐藏 var style = viewer.style; styles = { display: style.display, position: style.position, visibility: style.visibility }; $$D.setStyle( viewer, { display: "block", position: "absolute", visibility: "hidden" }); } this._viewerWidth = viewer.clientWidth; this._viewerHeight = viewer.clientHeight; if ( styles ) { $$D.setStyle( viewer, styles ); } rangeWidth = Math.ceil( this._viewerWidth / scale ); rangeHeight = Math.ceil( this._viewerHeight / scale ); } this._rangeWidth = rangeWidth; this._rangeHeight = rangeHeight; }, //开始 _start: function() { clearTimeout( this._timer ); var viewer = this._viewer, image = this._image, scale = this._scale; viewer.style.display = "block"; this._onstart(); this.onStart(); $$E.removeEvent( image, "mouseover", this._START ); $$E.removeEvent( image, "mousemove", this._START ); $$E.addEvent( document, "mousemove", this._MOVE ); $$E.addEvent( document, "mouseout", this._OUT ); this.mouse && $$E.addEvent( document, $$B.firefox ? "DOMMouseScroll" : "mousewheel", this._MOUSE ); }, //移动 _move: function(e) { clearTimeout( this._timer ); var x = e.pageX, y = e.pageY, rect = this._rect; if ( x < rect.left || x > rect.right || y < rect.top || y > rect.bottom ) { this._END();//移出原图范围 } else { var zoom = this._zoom, pos = this._repair( x - rect.left - this._repairLeft, y - rect.top - this._repairTop ); this._onmove( e, pos ); //设置定位 zoom.style.left = pos.left + "px"; zoom.style.top = pos.top + "px"; this.onMove(); } }, //修正坐标 _repair: function(x, y) { var scale = this._scale, zoom = this._zoom, viewerWidth = this._viewerWidth, viewerHeight = this._viewerHeight; //修正坐标 x = Math.ceil( viewerWidth / 2 - x * scale ); y = Math.ceil( viewerHeight / 2 - y * scale ); //范围限制 x = Math.min( Math.max( x, viewerWidth - zoom.width ), 0 ); y = Math.min( Math.max( y, viewerHeight - zoom.height ), 0 ); return { left: x, top: y }; }, //结束 _end: function() { this._onend(); this.onEnd(); if ( this.autoHide ) { this._viewer.style.display = "none"; } this.stop(); this.start(); }, //鼠标缩放 _mouse: function(e) { this._scale += ( e.wheelDelta ? e.wheelDelta / (-120) : (e.detail || 0) / 3 ) * this.rate; var opt = this.options; this._rangeWidth = opt.rangeWidth; this._rangeHeight = opt.rangeHeight; this._initSize(); this._initData(); this._move(e); e.preventDefault(); }, //开始 start: function() { if ( this._viewerWidth && this._viewerHeight ) { var image = this._image, START = this._START; $$E.addEvent( image, "mouseover", START ); $$E.addEvent( image, "mousemove", START ); } }, //停止 stop: function() { clearTimeout( this._timer ); $$E.removeEvent( this._image, "mouseover", this._START ); $$E.removeEvent( this._image, "mousemove", this._START ); $$E.removeEvent( document, "mousemove", this._MOVE ); $$E.removeEvent( document, "mouseout", this._OUT ); $$E.removeEvent( document, $$B.firefox ? "DOMMouseScroll" : "mousewheel", this._MOUSE ); }, //修改设置 reset: function(options) { this.stop(); var viewer = this._viewer, zoom = this._zoom; if ( $$D.contains( viewer, zoom ) ) { viewer.removeChild( zoom ); } var opt = $$.extend( this.options, options || {} ); this._scale = opt.scale; this._max = opt.max; this._min = opt.min; this._originPic = opt.originPic; this._zoomPic = opt.zoomPic; this._rangeWidth = opt.rangeWidth; this._rangeHeight = opt.rangeHeight; //重置属性 this._loaded = this._substitute = false; this._rect = null; this._repairLeft = this._repairTop = this._viewerWidth = this._viewerHeight = 0; this._initLoad(); }, //销毁程序 dispose: function() { this._ondispose(); this.stop(); if ( $$D.contains( this._viewer, this._zoom ) ) { this._viewer.removeChild( this._zoom ); } this._image.onload = this._preload.onload = this._image = this._preload = this._zoom = this._viewer = this.onLoad = this.onStart = this.onMove = this.onEnd = this._START = this._MOVE = this._END = this._OUT = null } } 转载请注明出处：http://www.cnblogs.com/cloudgamer/ 如有任何建议或疑问，欢迎留言讨论。打包下载地址
