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


然后考虑图片预加载: $.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
随便一提，如果有一种浏览器，也许会很幸运。
演示代码
打包下载 http://www.jb51.net/jiaoben/22866.html