jQuery chili 그림 멀리 확대 플러그 인

로 컬 그림,원 격 그림,너무 작은 그림 이 이 플러그 인 에 적응 하기 위해 서 는 세부 적 인 문제 가 많 습 니 다.
우선 구조 정의:

 
<div class="imgMagnifierWrap"> 
<div class="overlay"><!--   ，       ，       --></div> 
<div class="tipboxHover"><!--           --></div> 
<div class="imgOriginal"><!--       ，    <img src="bigOne.jpg" /><!--    ，    --></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> 

그리고 그림 미리 불 러 오 는 것 을 고려 합 니 다:

 
$.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<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(); 
}; 

아무 말 이나 브 라 우 저 가 있다 면 다행 일 수도 있 습 니 다데모 코드포장 다운로드.45677915.