ImageZoom 이미지 확대경 효과(다기 능 확장 편)

16773 단어 ImageZoom사진 확대경
원본 그림 과 디 스 플레이 상자 의 디 스 플레이 모드 를 확장 합 니 다.다음 과 같은 몇 가지 모드 가 있 습 니 다."follow"는 모드 를 따 릅 니 다.디 스 플레이 상 자 는 마우스 에 따라 이동 할 수 있 습 니 다."handle"손잡이 모드:원본 그림 에 표시 범 위 를 표시 하 는 손잡이 가 있 습 니 다."cropper"절단 모드:원 도 는 불투명 하 게 표시 범 위 를 표시 하고 다른 부분 은 반투명 으로 표시 합 니 다."handle-cropper"손잡이 절단 모드:손잡이 모드 와 절단 모드 의 혼합 판 은 투명도 와 손잡이 로 표시 범 위 를 표시 합 니 다.물론 더 많은 확장 은 당신 의 상상력 이 발굴 되 기 를 기다 리 고 있 습 니 다.호 환:ie6/7/8,fireforx 3.6.2,opera 10.51,safari 4.0.4,chrome 4.1 프로그램 설명[확장 모드]지난번 Images LazyLoad 는 계승 을 사용 하여 확장 하 였 으 며,이번 에는 플러그 인 형식 으로 확장 하 였 습 니 다.먼저 기본 모드 를 보 세 요.이 모드 들 은 ImageZoom 에 저 장 됩 니 다.MODE 의 이러한 구조:
 
ImageZoom._MODE = { 
   : { 
options: { 
... 
}, 
methods: { 
init: function() { 
... 
}, 
... 
} 
}, 
... 
}
그 중에서 모델 이름 은 기본 모델 의 이름 이 고 options 는 선택 가능 한 매개 변수 확장 이 며 methods 는 프로그램 구조의 확장 입 니 다.기본 모드 는'follow','handle','cropper'모드 를 포함 하고 나중에 자세히 소개 합 니 다.methods 는 확장 할 갈고리 프로그램 을 포함 하고 확장 할 주요 부분 입 니 다.ps:여기 서 말 하 는 모델 은'디자인 모델'안의 모델 이 아 닙 니 다.확장 은 프로그램 초기 화 시 진행 되 며initialize 프로그램 전에 실행 합 니 다.원래 프로그램의 구조 에 영향 을 주지 않 기 위해 서 여 기 는 직 입 법 으로initialize 전에 프로그램 을 삽입 합 니 다
 
ImageZoom.prototype._initialize = (function(){ 
var init = ImageZoom.prototype._initialize, 
...; 
return function(){ 
... 
init.apply( this, arguments ); 
} 
})();
원 리 는 원래 의 함 수 를 저장 하고 프로그램 을 삽입 하여 새로운 함 수 를 구성 한 다음 에 원래 의 함 수 를 다시 교체 하 는 것 입 니 다.조합 기본 모델 의 상황 을 고려 하여 한 대상 이 실제 사용 하 는 모델 을 저장 했다
 

mode = ImageZoom._MODE, 
modes = { 
"follow": [ mode.follow ], 
"handle": [ mode.handle ], 
"cropper": [ mode.cropper ], 
"handle-cropper": [ mode.handle, mode.cropper ] 
};
'handle-cropper'모델 은 바로'handle'과'cropper'의 조합 모델 임 을 볼 수 있다.삽 입 된 프로그램의 주요 임 무 는 설 정 된 기본 모드 에 따라 확장 하 는 것 입 니 다
 
var options = arguments[2]; 
if ( options && options.mode && modes[ options.mode ] ) { 
$$A.forEach( modes[ options.mode ], function( mode ){ 
$$.extend( options, mode.options, false ); 
$$A.forEach( mode.methods, function( method, name ){ 
$$CE.addEvent( this, name, method ); 
}, this ); 
}, this ); 
}
우선 options 선택 가능 한 매개 변수 대상 을 확장 합 니 다.선택 가능 한 매개 변 수 는 세 번 째 매개 변수 이기 때문에 arguments[2]로 가 져 옵 니 다.extend 의 세 번 째 매개 변 수 는 false 로 설정 되 어 있 으 며,같은 속성 을 다시 쓰 지 않 는 다 는 것 을 설명 합 니 다.즉,사용자 정의 속성 값 을 유지 하 는 것 입 니 다.그리고 methods 안의 방법 을 갈고리 함수 로 프로그램 에 하나씩 추가 합 니 다.methods 는 init,load,start,repair,move,end,dispose 등 몇 가지 방법 을 포함 할 수 있 습 니 다.각각 ImageZoom 에서 초기 화,로드,시작,수정,이동,종료 와 소각 사건 에 대응 합 니 다.확장 할 때 서로 다른 이벤트 가 서로 다른 작업 을 수행 합 니 다:init 초기 화 함수:확장 에 필요 한 속성 을 설정 합 니 다.이 속성 들 은 ImageZoom 자체 의 속성 과 충돌 하지 않도록 주의 하 십시오.즉,이름 을 바 꾸 는 것 입 니 다.load 로드 함수:그림 로드 가 완료 되 었 고 관련 매개 변수 도 설정 되 었 으 며 주로 확대 효 과 를 수행 하기 전에 준비 작업 을 합 니 다.start 시작 함수:확대 효 과 를 촉발 할 때 실 행 됩 니 다.repair 수정 함수:큰 그림 의 위 치 를 수정 하 는 좌표 값 입 니 다.move 이동 함수:확대 효 과 를 촉발 한 후 마우스 가 이동 할 때 실 행 됩 니 다.end 종료 함수:확대 효 과 를 끝 낼 때 실 행 됩 니 다.dispose 소각 함수:프로그램 을 제거 할 때 프로그램 을 청소 합 니 다.ps:구체 적 인 위 치 는 ImageZoom 에서$CE.fireEvent 를 사용 하 는 부분 을 참고 합 니 다.직물 입 법(weave)과 갈고리 법(hook)으로 프로그램 을 확장 하 는 것 을 볼 수 있 습 니 다.직 입 법 은 일종 의 op 으로 원래 프로그램 을 바 꾸 지 않 고 확장 할 수 있 으 나 함수 앞 이나 뒤에 만 프로그램 을 추가 할 수 있 습 니 다.한편,갈고리 법 은 원래 프로그램 에 대응 하 는 갈 고 리 를 설치 해 야 사용 할 수 있 지만 위치 가 상대 적 으로 유연 하 다.모드 에 따라]"follow"모드 에 따라 확대 할 때 표시 상 자 는 마 우 스 를 따라 이동 합 니 다.마치 돋보기 를 들 고 보 는 효과 와 같 습 니 다.우선 디 스 플레이 상 자 는 절대적 으로 위치 해 야 합 니 다.디 스 플레이 상자 가 마 우 스 를 따라 이동 하려 면 move 에 대응 하 는 left/top 을 설정 하면 됩 니 다:var style=this.viewer.style; style.left = e.pageX - this._repairFollowLeft + "px"; style.top = e.pageY - this._repairFollowTop + "px"; 그 중 pageX/pageY 는 마우스 현재 좌표 입 니 다.repairFollowLeft/_repair Follow Top 은 좌표 의 수정 매개 변수 입 니 다.수정 매개 변 수 는 load 에 설정 되 어 있 습 니 다.표시 상자 가 숨 어 있 으 면 이전 편 에서 표시 범 위 를 가 져 오 는 방법 으로 매개 변 수 를 가 져 옵 니 다
 
if ( !viewer.offsetWidth ) { 
styles = { display: style.display, visibility: style.visibility }; 
$$D.setStyle( viewer, { display: "block", visibility: "hidden" }); 
} 
... 
if ( styles ) { $$D.setStyle( viewer, styles ); }
따라 가기 위해 마 우 스 를 표시 상자 중심 위치 에 고정 시 키 고 표시 상자 의 offset Width/offset Height 에 따라 매개 변 수 를 수정 합 니 다
 
this._repairFollowLeft = viewer.offsetWidth / 2; 
this._repairFollowTop = viewer.offsetHeight / 2;
표시 상자 의 offset Parent 가 body 가 아니라면,또한 offsetParent 에 따라 좌 표를 수정 해 야 합 니 다
 
if ( !/BODY|HTML/.test( viewer.offsetParent.nodeName ) ) { 
var parent = viewer.offsetParent, rect = $$D.rect( parent ); 
this._repairFollowLeft += rect.left + parent.clientLeft; 
this._repairFollowTop += rect.top + parent.clientTop; 
}
ps:Maxthon 테스트 에서 body 서브 요소 의 offsetParent 는 body 가 아니 라 html 입 니 다.프로그램 을 제거 한 후 디 스 플레이 상자 의 스타일 을 복원 하기 위해 load 프로그램 에서 스타일 백업 을 했 습 니 다
 
var viewer = this._viewer, style = viewer.style, styles; 
this._stylesFollow = { 
left: style.left, top: style.top, position: style.position 
};
dispose 에서$D.setStyle(this.viewer, this._stylesFollow ); 지금 은 기본 적 인 효과 에 이 르 렀 지만 큰 그림 의 이동 범위 가 제한 되 어 마우스 가 경계 에 가 까 워 지면 큰 그림 이 걸 려 움 직 이지 않 는 다.마우스 가 이동 할 때 큰 그림 이 지속 적 으로 변화 하 는 효 과 를 실현 하기 위해 repair 에서 이동 좌 표를 수정 했다
 
pos.left = ( viewerWidth / 2 - pos.left ) * ( viewerWidth / zoom.width - 1 ); 
pos.top = ( viewerHeight / 2 - pos.top ) * ( viewerHeight / zoom.height - 1 );
원리 가 약간 복잡 하 다.수평 좌 표를 예 로 들 면 다음 그림 을 먼저 보 자큰 사각형 은 큰 그림 의 대상 을 대표 하고 작은 사각형 은 표시 상 자 를 대표 한다.현재 위 치 는 마우스 좌표 에 따라 실제 표 시 된 위치 로 목표 위치 가 효 과 를 실현 하고 자 하 는 위치 입 니 다.일부 물리 적 또는 기하학 적 지식 은 이 등식 을 알 아야 한다.x/y=m/n 은 y=x*n/m=x*(zoom.width-viewer Width)/zoom.height x 현재 좌 표 는 pos.left 를 통 해 얻 을 수 있다.x=viewer Width/2-pos.left 마지막 으로 얻 은 것:left=-y=(viewer Width/2-pos.left)*(viewer Width/zoom.width-1)수직 좌표 도 많 지 않다.드래그 핸들 모드]드래그 핸들 은 원 그림 위 에 있 는 층 으로 원 그림 의 위치 와 범 위 를 표시 합 니 다.표시 범 위 는rangeWidth/_range Height 획득.위치 지정 은 마우스 좌표 나 큰 그림 에 따라 좌 표를 설정 할 수 있 습 니 다.마우스 좌 표를 사용 하려 면 범위 제어 와 같은 다른 처 리 를 해 야 하 며,큰 그림 에 따라 좌 표를 찾 는 것 이 상대 적 으로 편리 하고 정확 하 며,프로그램 도 뒤의 방법 을 사용 해 야 한다.우선 init 에서 하 나 를 정의 합 니 다handle 드래그 대상:
 
var handle = $$( this.options.handle ); 
if ( !handle ) { 
var body = document.body; 
handle = body.insertBefore(this._viewer.cloneNode(false), body.childNodes[0]); 
handle.id = ""; 
handle["_createbyhandle"] = true; 
} 
$$D.setStyle( handle, { padding: 0, margin: 0, display: "none" } );
사용자 정의 드래그 대상 이 없 으 면 드래그 대상 으로 디 스 플레이 상 자 를 복사 합 니 다.자동 으로 생 성 되 는 손잡이 대상 에"createby handle"속성 을 표시 하여 dispose 에서 제거 하기 편리 합 니 다.load 시 드래그 스타일 설정:
 
$$D.setStyle( handle, { 
position: "absolute", 
width: this._rangeWidth + "px", 
height: this._rangeHeight + "px", 
display: "block", 
visibility: "hidden" 
});
절대적 인 포 지 셔 닝 은 필수 이 며rangeWidth/_range Height 사이즈 설정.display 와 visibility 를 설정 하 는 것 은 아래 에서 인 자 를 얻 기 위해 서 입 니 다.먼저 원 도 좌표 에 따라 수정 매개 변 수 를 가 져 옵 니 다:this.repairHandleLeft = rect.left + this._repairLeft - handle.clientLeft; this._repairHandleTop = rect.top + this._repairTop - handle.clientTop; 따 르 는 패턴 과 유사 하 며,offset Parent 포 지 셔 닝 수정 도 해 야 합 니 다
 
if ( handle.offsetParent.nodeName.toUpperCase() != "BODY" ) { 
var parent = handle.offsetParent, rect = $$D.rect( parent ); 
this._repairHandleLeft -= rect.left + parent.clientLeft; 
this._repairHandleTop -= rect.top + parent.clientTop; 
}

그리고 다시 숨 깁 니 다:$D.setStyle(handle,{display:"none",visibility:"visible"});start 에서 드래그 대상 을 표시 합 니 다.move 시 큰 그림 의 위치 추적 좌표 에 따라 손잡이 포 지 셔 닝 을 설정 합 니 다
 
var style = this._handle.style, scale = this._scale; 
style.left = Math.ceil( this._repairHandleLeft - x / scale ) + "px"; 
style.top = Math.ceil( this._repairHandleTop - y / scale ) + "px";
end 에 서 는 손잡이 대상 을 숨 깁 니 다.【절단 모드]'절단'은 선택 한 부분 이 모두 투명 하고 다른 부분 이 반투명 한 효과 입 니 다.주로 클립 을 통 해 이 루어 지 는데 구체 적 인 원 리 는 그림 절단 효 과 를 볼 수 있다.절단 효 과 를 실현 하기 위해 서 는 init 에 새 가 필요 합 니 다.cropper 절단 층:
 
var body = document.body, 
cropper = body.insertBefore(document.createElement("img"), body.childNodes[0]); 
cropper.style.display = "none";
load 에 이 절단 층 을 설정 합 니 다
 
cropper.src = image.src; 
cropper.width = image.width; 
cropper.height = image.height; 
$$D.setStyle( cropper, { 
position: "absolute", 
left: rect.left + this._repairLeft + "px", 
top: rect.top + this._repairTop + "px" 
});
차이 가 많 지 않 습 니 다.원 그림 대상 을 복사 하고 원 그림 대상 위 에 절대 위치 합 니 다.start 시 절단 층 을 표시 하고 투명도 에 따라 원 도 를 반투명 상태 로 설정 합 니 다.move 시 큰 그림 이 이동 하 는 좌표 에 따라 절단 층 이 클립 할 범 위 를 설정 합 니 다
 
var w = this._rangeWidth, h = this._rangeHeight, scale = this._scale; 
x = Math.ceil( -x / scale ); y = Math.ceil( -y / scale ); 
this._cropper.style.clip = "rect(" + y + "px " + (x + w) + "px " + (y + h) + "px " + x + "px)";
end 에 서 는 절단 층 을 숨 기 고 원래 그림 을 불투명 하 게 설정 하여 원래 의 상 태 를 회복 합 니 다.dispose 에서 절단 층 을 제거 하 는 것 도 기억 해 야 합 니 다.기술 을 사용 하려 면 확장 효과 가 필요 할 때 이 확장 프로그램 을 추가 해 야 합 니 다.스스로 ImageZoom.MODE 확장 을 진행 합 니 다.확장 후 modes 에 대응 하 는 모드 를 추가 하 는 것 을 기억 하 십시오.여러 개의 기본 모델 을 조합 하여 동시에 사용 할 수 있 으 며 구체 적 으로'handle-cropper'모델 을 참고 할 수 있 습 니 다.사용 설명 사용 방법 은 ImageZoom 과 차이 가 많 지 않 습 니 다.선택 할 수 있 는 참고 mode 설정 디 스 플레이 모드 만 추가 되 었 습 니 다."handle"모드 를 사용 할 때 선택 할 수 있 는 인자 의"handle"속성 은 손잡이 대상 을 설정 할 수 있 습 니 다."cropper"모드 를 사용 할 때 선택 할 수 있 는 인자 의"opacity"속성 은 투명 도 를 설정 할 수 있 습 니 다."handle-cropper"모드 를 사용 할 때 위의 두 매개 변 수 를 모두 사용 할 수 있 습 니 다.프로그램 원본 코드
 
ImageZoom._MODE = { 
//   
"follow": { 
methods: { 
init: function() { 
this._stylesFollow = null;//     
this._repairFollowLeft = 0;//    left 
this._repairFollowTop = 0;//    top 
}, 
load: function() { 
var viewer = this._viewer, style = viewer.style, styles; 
this._stylesFollow = { 
left: style.left, top: style.top, position: style.position 
}; 
viewer.style.position = "absolute"; 
//       
if ( !viewer.offsetWidth ) {//   
styles = { display: style.display, visibility: style.visibility }; 
$$D.setStyle( viewer, { display: "block", visibility: "hidden" }); 
} 
//       
this._repairFollowLeft = viewer.offsetWidth / 2; 
this._repairFollowTop = viewer.offsetHeight / 2; 
//  offsetParent   
if ( !/BODY|HTML/.test( viewer.offsetParent.nodeName ) ) { 
var parent = viewer.offsetParent, rect = $$D.rect( parent ); 
this._repairFollowLeft += rect.left + parent.clientLeft; 
this._repairFollowTop += rect.top + parent.clientTop; 
} 
if ( styles ) { $$D.setStyle( viewer, styles ); } 
}, 
repair: function(e, pos) { 
var zoom = this._zoom, 
viewerWidth = this._viewerWidth, 
viewerHeight = this._viewerHeight; 
pos.left = ( viewerWidth / 2 - pos.left ) * ( viewerWidth / zoom.width - 1 ); 
pos.top = ( viewerHeight / 2 - pos.top ) * ( viewerHeight / zoom.height - 1 ); 
}, 
move: function(e) { 
var style = this._viewer.style; 
style.left = e.pageX - this._repairFollowLeft + "px"; 
style.top = e.pageY - this._repairFollowTop + "px"; 
}, 
dispose: function() { 
$$D.setStyle( this._viewer, this._stylesFollow ); 
} 
} 
}, 
//   
"handle": { 
options: {//    
handle: ""//     
}, 
methods: { 
init: function() { 
var handle = $$( this.options.handle ); 
if ( !handle ) {//               
var body = document.body; 
handle = body.insertBefore(this._viewer.cloneNode(false), body.childNodes[0]); 
handle.id = ""; 
handle["_createbyhandle"] = true;//         
} 
$$D.setStyle( handle, { padding: 0, margin: 0, display: "none" } ); 

this._handle = handle; 
this._repairHandleLeft = 0;//    left 
this._repairHandleTop = 0;//    top 
}, 
load: function() { 
var handle = this._handle, rect = this._rect; 
$$D.setStyle( handle, { 
position: "absolute", 
width: this._rangeWidth + "px", 
height: this._rangeHeight + "px", 
display: "block", 
visibility: "hidden" 
}); 
//       
this._repairHandleLeft = rect.left + this._repairLeft - handle.clientLeft; 
this._repairHandleTop = rect.top + this._repairTop - handle.clientTop; 
//  offsetParent   
if ( !/BODY|HTML/.test( handle.offsetParent.nodeName ) ) { 
var parent = handle.offsetParent, rect = $$D.rect( parent ); 
this._repairHandleLeft -= rect.left + parent.clientLeft; 
this._repairHandleTop -= rect.top + parent.clientTop; 
} 
//   
$$D.setStyle( handle, { display: "none", visibility: "visible" }); 
}, 
start: function() { 
this._handle.style.display = "block"; 
}, 
move: function(e, x, y) { 
var style = this._handle.style, scale = this._scale; 
style.left = Math.ceil( this._repairHandleLeft - x / scale ) + "px"; 
style.top = Math.ceil( this._repairHandleTop - y / scale ) + "px"; 
}, 
end: function() { 
this._handle.style.display = "none"; 
}, 
dispose: function() { 
if( "_createbyhandle" in this._handle ){ document.body.removeChild( this._handle ); } 
this._handle = null; 
} 
} 
}, 
//   
"cropper": { 
options: {//    
opacity: .5//    
}, 
methods: { 
init: function() { 
var body = document.body, 
cropper = body.insertBefore(document.createElement("img"), body.childNodes[0]); 
cropper.style.display = "none"; 

this._cropper = cropper; 
this.opacity = this.options.opacity; 
}, 
load: function() { 
var cropper = this._cropper, image = this._image, rect = this._rect; 
cropper.src = image.src; 
cropper.width = image.width; 
cropper.height = image.height; 
$$D.setStyle( cropper, { 
position: "absolute", 
left: rect.left + this._repairLeft + "px", 
top: rect.top + this._repairTop + "px" 
}); 
}, 
start: function() { 
this._cropper.style.display = "block"; 
$$D.setStyle( this._image, "opacity", this.opacity ); 
}, 
move: function(e, x, y) { 
var w = this._rangeWidth, h = this._rangeHeight, scale = this._scale; 
x = Math.ceil( -x / scale ); y = Math.ceil( -y / scale ); 
this._cropper.style.clip = "rect(" + y + "px " + (x + w) + "px " + (y + h) + "px " + x + "px)"; 
}, 
end: function() { 
$$D.setStyle( this._image, "opacity", 1 ); 
this._cropper.style.display = "none"; 
}, 
dispose: function() { 
document.body.removeChild( this._cropper ); 
this._cropper = null; 
} 
} 
} 
} 

ImageZoom.prototype._initialize = (function(){ 
var init = ImageZoom.prototype._initialize, 
mode = ImageZoom._MODE, 
modes = { 
"follow": [ mode.follow ], 
"handle": [ mode.handle ], 
"cropper": [ mode.cropper ], 
"handle-cropper": [ mode.handle, mode.cropper ] 
}; 
return function(){ 
var options = arguments[2]; 
if ( options && options.mode && modes[ options.mode ] ) { 
$$A.forEach( modes[ options.mode ], function( mode ){ 
//  options 
$$.extend( options, mode.options, false ); 
//     
$$A.forEach( mode.methods, function( method, name ){ 
$$CE.addEvent( this, name, method ); 
}, this ); 
}, this ); 
} 
init.apply( this, arguments ); 
} 
})();
온라인 프레젠테이션 주소http://demo.jb51.net/js/ImageZoom_ext/ImageZoom_ext.htm포장 다운로드 주소https://www.jb51.net/jiaoben/25809.html출처:http://www.cnblogs.com/cloudgamer/
jquery 키워드'드래그 검색'의'드래그'및 그림'자가 적응 확대'효과 구현
가볍게 JS 디 버 깅 배우 기(어떤 도구 도 다운로드 하지 않 음)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage