jQuery chili image distant zoom plug-in_jquery

In order to adapt local images, remote images, and images that are too small to this plug-in, there are many details to deal with.

First define the structure:

<code class="html"> 
<div class="imgMagnifierWrap"> 
<div class="overlay"><!--覆盖层，鼠标的感应区域，位于小图上最方--></div> 
<div class="tipboxHover"><!--小图上方的悬停提示方框--></div> 
<div class="imgOriginal"><!--装载大图的容器，绝对定位<img  src="/static/imghwm/default1.png"  data-src="bigOne.jpg"  class="lazy" / alt="jQuery chili image distant zoom plug-in_jquery" ><!--前景大图，绝对定位--></div> 
</div> 
</code> 

<code class="css"> 
<!--样式--> 
<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> 
</style></code>

Then consider image preloading:

<code class="js"> 
$.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; 
};</code> 

Recalculate the sensing area:

The four sides of the sensing area where the small picture is located are minus a rectangle of 1/2 the size of each of the four sides of the indicator box. The area outside this is displayed to the boundary of the large picture:

<code class="js"> 
var borderLeft =thumbInfo.left+tipboxInfo.width/2; 
var ratioX=(mouseInfo.x-borderLeft)/(thumbInfo.width-tipboxInfo.width); 
</code>

Problems caused by using large images as background images:

Use hidden foreground image to preload, load event determines the timing, ie, chrome are normal, ff requested the image twice, the image is not cached;

Another way, don’t preload large images. After changing to "loading" directly with the overlay at the position of the large image, the image appears to be loaded gradually under chrome, while it is displayed directly without chrome, which is a bit regretful.

Final result, using the large image as the foreground image:

The advantage is that both the load and error events of large images can work normally:

<code class="js"> 
$.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!'); 
} 
});</code> 

Solution to the out-of-synchronization between the load event of the large image preload and the mousemove event of the small image: store the mouse coordinates in real time, and separate the method of positioning the prompt box and the positioning of the large image.

<code class="js"> 
  //鼠标位置存储 
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 :math.min left:mouseinfo.x setimgposition> 
</thumbinfo.width></code>

Just a quick aside, you might be lucky if you have a browser.
Demo code
Package download http://www.jb51.net/jiaoben/22866.html