图像远处放大 jQuery插件

为了让本地图片、远程图片、过小的图片都适应此插件，有很多细节问题要处理。

首先定义结构：

  <div class="imgMagnifierWrap">
    <div class="overlay"><!--覆盖层，鼠标的感应区域，位于小图上最方--></div>
    <div class="tipboxHover"><!--小图上方的悬停提示方框--></div>
    <div class="imgOriginal"><!--装载大图的容器，绝对定位<img src="bigOne.jpg" /><!--前景大图，绝对定位--></div>
  </div>

    <!--样式-->
    <style type="text/css">
    .imgMagnifierWrap *{position:absolute;background:#fff;}
    .imgMagnifierWrap .tipboxHover{width:80px; height:60px; filter:alpha(opacity=30);opacity:.3;display:none;}
    .imgMagnifierWrap .imgOriginal{display:none;z-index:9999;overflow:hidden; width:400px; height:400px;
  background-color:#cdf; background-repeat:no-repeat; text-align:center;border:1px solid #555; }
    .imgMagnifierWrap .overlay{cursor:crosshair;filter:alpha(opacity=0);opacity:0;}
    <style>

然后考虑图片预加载:

 $.imgPreloader = function (url, eventLists) {
  var img = new Image();
  var $img = $(img);
  img.src = url;
  $.each(eventLists, function (type, fn) {
    $img.bind(type, fn);
  });
  $img.trigger(img.complete ? 'load' : 'begin');
  return $img;
};

再计算感应区域：

小图所处感应区域四边各减去指示方框各四边的1/2大小的矩形，在此之外的区域则显示到大图边界;在有限的区域显示无限大的图片只需要计算比例就可以了：

    var borderLeft =thumbInfo.left+tipboxInfo.width/2;
    var ratioX=(mouseInfo.x-borderLeft)/(thumbInfo.width-tipboxInfo.width);                

用大图用做背景图片引发的问题：

用隐藏的前景图片预加载，load事件判断时机，ie,chrome正常，ff请求了两次图片，图片未缓存;

换一种方式，不预载大图。改成直接在大图位置用覆盖层做“loading”后,chrome下表现为渐进加载图片，非chrome是直接显示，略有遗憾。

最终结果，把大图用做前景图片：

优势在于，大图的load和error事件都可以正常工作：

$.imgPreloader($anchor.attr('href'), {
  load: function () {
    isImageReady = true;
    $o.empty().append(this);
    setTimeout(autoFitPicture, 0);
  },
  begin: function () {
    $o.text('loading...');
  },
  error: function () {
    isImageReady = true;
    $o.text('invalid picture!');
  }
});

大图预载的load事件和小图mousemove事件不同步的解决办法：实时存储鼠标坐标，把提示方框定位和大图定位的方法分离。

 //鼠标位置存储
    var mouseInfo={x:0,y:0};
    //指示框定位
    var setTipboxPosition=function(e){
        mouseInfo.x=e.pageX;
        mouseInfo.y=e.pageY;
        $tipbox.css({
                    top:mouseInfo.y<thumbInfo.width/2+thumbInfo.top
                        ?Math.max(mouseInfo.y-tipboxInfo.height/2,thumbInfo.top)
                        :Math.min(mouseInfo.y-tipboxInfo.height/2,thumbInfo.top+thumbInfo.height-tipboxInfo.height),
                    left:mouseInfo.x<thumbInfo.width/2+thumbInfo.left
                        ?Math.max(mouseInfo.x-tipboxInfo.width/2,thumbInfo.left)
                        :Math.min(mouseInfo.x-tipboxInfo.width/2,thumbInfo.left+thumbInfo.width-tipboxInfo.width)
                    }); 
        setImgPosition();
    };

随便一提，如果只有一种浏览器，也许会很幸运。

查看：

/Files/ambar/demos/imgMagnifier/demo.htm