jQuery 칠리 이미지 원거리 줌 플러그인_jquery

로컬 이미지, 원격 이미지, 너무 작은 이미지를 이 플러그인에 적용하려면 처리해야 할 세부 사항이 많습니다.

먼저 구조를 정의합니다.

<code class="html"> 
<div class="imgMagnifierWrap"> 
<div class="overlay"><!--覆盖层，鼠标的感应区域，位于小图上最方--></div> 
<div class="tipboxHover"><!--小图上方的悬停提示方框--></div> 
<div class="imgOriginal"><!--装载大图的容器，绝对定位<img src="bigOne.jpg" /><!--前景大图，绝对定位--></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> 
</code>

그런 다음 이미지 사전 로드를 고려해보세요.

<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> 

감지 영역 다시 계산:

작은 그림이 위치한 감지 영역의 네 변은 표시 상자 네 변의 크기의 1/2만큼 직사각형을 뺀 영역입니다. 이 영역 밖의 영역은 큰 그림의 경계선까지 표시됩니다. :

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

큰 이미지를 배경 이미지로 사용할 때 발생하는 문제:

미리 로드하려면 숨겨진 전경 이미지를 사용하고 로드 이벤트는 타이밍을 결정합니다. 즉, 크롬은 정상이고 ff는 이미지를 두 번 요청했지만 이미지는 캐시되지 않습니다.

또 다른 방법은 큰 이미지를 미리 로드하지 않는 것입니다. 큰 이미지 위치에서 오버레이로 직접 '로딩'으로 변경한 후 이미지가 크롬 아래에서 서서히 로딩되는 것처럼 보이는데, 크롬 없이 바로 표시되는 점은 조금 아쉽습니다.

큰 이미지를 전경 이미지로 사용한 최종 결과:

큰 이미지의 로드 및 오류 이벤트가 모두 정상적으로 작동할 수 있다는 장점이 있습니다.

<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> 

큰 이미지 미리 로드의 로드 이벤트와 작은 이미지의 mousemove 이벤트 간의 비동기화 해결 방법: 마우스 좌표를 실시간으로 저장하고 프롬프트 상자 위치 지정 방법과 위치 지정 방법을 분리합니다. 큰 이미지.

<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/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(); 
};</code> 

잠깐만요. 브라우저가 있다면 운이 좋을 수도 있습니다.
데모 코드
패키지 다운로드http://www.jb51.net/jiaoben/22866.html