jQuery chili Picture Remote Amplification Plugin _jquery

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.