In order to allow local pictures, remote pictures, too small pictures are adapted to this plug-in, there are many details to deal with.
-
-
First, define the structure:
-
-
<div class="imgMagnifierWrap">
<div class="overlay"><!--覆盖层,鼠标的感应区域,位于小图上最方--></div>
<div class="tipboxHover"><!--小图上方的悬停提示方框--></div>
<div class="imgOriginal"><!--装载大图的容器,绝对定位<!--前景大图,绝对定位--></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>
-
-
Then consider the picture preload:
-
-
$.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;
};
-
-
Re-compute the sensing area:
-
The small image is in the sensing area of the four
-
edges minus the rectangle indicating the 1/2 size of the four sides of the box, and the area outside is shown to the larger chart boundary:
-
-
var borderLeft =thumbInfo.left+tipboxInfo.width/2;
var ratioX=(mouseInfo.x-borderLeft)/(thumbInfo.width-tipboxInfo.width);
-
-
The problem with using large graphs for background pictures:
-
-
with hidden foreground picture preload, load event judgment time, Ie,chrome Normal, FF request two times picture, picture is not cached;
-
-
in another way, do not preload a large image. To directly in the large map position with the overlay to do "loading", chrome under the performance of progressive loading pictures, non-chrome is directly displayed, slightly regret.
-
-
The final result is to make the big picture a foreground picture:
-
The
-
advantage is that the load and error events for large graphs can work correctly:
$.imgpreloader ($anchor. attr (' href '), {load:function () {IsI
Mageready=true;
$o. Empty (). append (this);
SetTimeout (autofitpicture,0);
}, Begin:function () {$o. Text (' Loading ... ');
}, Error:function () {isimageready=true;
$o. Text (' invalid picture! ');
}
});
-
-
Large image preload load events and small map MouseMove event synchronization Solution: Real-time storage of mouse coordinates, the prompt box positioning and large map positioning method separation.
//鼠标位置存储
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();
};
Incidentally, if you have a browser, you might be lucky.
Demo Code
Package Download http://www.jb51.net/jiaoben/22866.html