為了讓本地圖片、遠程圖片、過小的圖片都適應此插件，有很多細節問題要處理。

首先定義結構：

 <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(); }; 

隨便一提，如果有一種瀏覽器，也許會很幸運。
演示代碼
打包下載 //m.survivalescaperooms.com/jiaoben/22866.html