作者：go800li | 来源：互联网 | 2018-06-15 02:12
为了让本地图片、远程图片、过小的图片都适应此插件，有很多细节问题要处理。
- 首先定义结构：
.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;}
- 然后考虑图片预加载:
$.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
京公网安备 11010802041100号