이 절단 레이어를 로드로 설정합니다.
cropper.src = image.src;
cropper.width = image.width;
cropper.height = image.height;
$$D.setStyle( 자르기, {
위치: "절대",
왼쪽: ret.left this._repairLeft "px",
상단: ret.top this._repairTop "px"
})
원본 이미지 개체를 거의 복사하여 원본 이미지 개체 위에 완전히 배치합니다.
시작할 때 커팅 레이어를 표시하고 투명도에 따라 원본 이미지를 반투명 상태로 설정합니다.
이동 시 큰 이미지 이동 좌표에 따라 자르기 레이어의 클리핑 범위를 설정하세요.
var w = this._rangeWidth, h = this._rangeHeight, scale = this._scale
x = Math.ceil( -x / scale; ); y = Math.ceil( -y / scale );
this._cropper.style.clip = "ret(" y "px " (x w) "px " (y h) "px " x "px)" ;
마지막으로 커팅 레이어를 숨기고 원본 이미지를 불투명하게 재설정하여 원래 상태로 복원합니다.
절단층을 제거한 후 폐기하는 것도 잊지 마세요.
사용 팁
확장 효과가 필요한 경우에만 이 확장 기능을 추가하면 됩니다.
ImageZoom._MODE를 직접 확장할 수 있습니다. 확장 후에는 모드에 해당 모드를 추가해야 합니다.
여러 기본 모드를 결합하여 동시에 사용할 수 있으며, 자세한 내용은 "손잡이-자르기" 모드를 참고하세요.
사용 지침 디스플레이 모드를 설정하는 추가 선택적 참조 모드가 있다는 점을 제외하면 사용 방법은 ImageZoom과 유사합니다.
"handle" 모드를 사용하는 경우 선택적 매개변수의 "handle" 속성으로 드래그 핸들 개체를 설정할 수 있습니다.
'자르기' 모드를 사용할 때 선택적 매개변수의 'opacity' 속성으로 투명도를 설정할 수 있습니다.
"자르기 핸들" 모드를 사용하는 경우 위의 매개변수를 모두 사용할 수 있습니다.
프로그램 소스 코드
ImageZoom._MODE = {
//Follow
"follow": {
메서드: {
init: function() {
this._stylesFollow = null;/ /백업 스타일
this._repairFollowLeft = 0;//수정 좌표 왼쪽
this._repairFollowTop = 0;//수정 좌표 상단
},
load: function() {
var 뷰어 = this._viewer, style = Viewer.style, styles;
this._stylesFollow = {
왼쪽: style.left, 위쪽: style.top, 위치: style.position
}; .style.position = "absolute";
//수정 매개변수 가져오기
if ( !viewer.offsetWidth ) {//Hide
styles = { display: style.display, visible: style.visibility } ;
$$D.setStyle( Viewer, { display: "block", visible: "hidden" })
}
//중앙 위치 수정
this._repairFollowLeft = Viewer.offsetWidth / 2 ; this._repairFollowTop = Viewer.offsetHeight / 2;
//offsetParent 위치 수정
if ( !/BODY|HTML/.test( Viewer.offsetParent.nodeName ) ) {
var parent = Viewer.offsetParent, ret = $$D.direct( parent );
this._repairFollowLeft = ret.left parent.clientLeft;
this._repairFollowTop = ret.top parent.clientTop
} 🎜> if ( 스타일 ) { $$D.setStyle( 뷰어, 스타일 ) }
},
repair: function(e, pos) {
var Zoom = this._zoom,
viewerWidth = this ._viewerWidth,
viewerHeight = this._viewerHeight;
pos.left = (viewerWidth / 2 - pos.left ) * (viewerWidth / Zoom.width - 1 )
viewerHeight / 2 - pos.top ) * (viewerHeight / Zoom.height - 1 );
},
move: function(e) {
var style = this._viewer.style; left = e.pageX - this._repairFollowLeft "px";
style.top = e.pageY - this._repairFollowTop "px"
},
dispose: function() {
$$ D. setStyle( this._viewer, this._stylesFollow )
}
}
},
//드래그 핸들
"handle": {
옵션: {//기본값 value
handle: ""//드래그 핸들 객체
},
methods: {
init: function() {
var handler = $$( this.options.handle )
if ( !handle ) {//정의되지 않은 경우 표시 상자를 복사본으로 교체합니다.
var body = document.body
handle = body.insertBefore(this._viewer.cloneNode(false), body .childNodes[0] ; 0, 여백: 0, 표시: "none" } );
this._handle = handler;
this._repairHandleLeft = 0;//왼쪽 좌표
._repairHandleTop = 0;/ /수정 상단
},
load: function() {
var handler = this._handle, ret = this._direct
$$D.setStyle(handle, {
위치: "절대",
너비: this._rangeWidth "px",
높이: this._rangeHeight "px",
디스플레이: "블록",
가시성: "숨김 "
} );
//수정 매개변수 가져오기
this._repairHandleLeft = ret.left this._repairLeft - handler.clientLeft;
this._repairHandleTop = ret.top this._repairTop - 핸들. clientTop;
/ /offsetParent 위치 수정
if ( !/BODY|HTML/.test(handle.offsetParent.nodeName) ) {
var parent = handler.offsetParent, ret = $$D.lect( parent );
this._repairHandleLeft -= ret.left parent.clientLeft;
this._repairHandleTop -= ret.top parent.clientTop;
//Hide
$$D. setStyle(handle, {display: "none", visible: "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;
}
}
},
//Cut
"cropper": {
옵션: {//기본값
불투명도 : .5//투명성
},
메서드: {
init: function() {
var body = document.body,
cropper = body.insertBefore(document.createElement(" img"), body.childNodes[0]);
cropper.style.display = "none";
this._cropper = 자르기;
this.opacity = this.options.opacity;
},
load: function() {
varcropper = this._cropper, image = this._image, ret = this._ect
cropper.src = image.src; Cropper.width = image.width;
cropper.height = image.height;
$$D.setStyle( Cropper, {
position: "absolute",
left: ret.left. _repairLeft "px",
top: ret.top this._repairTop "px"
})
},
start: function() {
this._cropper.style.display = "블록";
$$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 ); .style.clip = " ret(" y "px " (x w) "px " (y h) "px " x "px)"
},
end: function() {
$$D.setStyle( this._image, "opacity", 1 );
this._cropper.style.display = "없음";
},
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 =args[2]
if ( options && options. 모드 && 모드[ options.mode ] ) {
$$A.forEach( 모드[ options.mode ], function( 모드 ){
//扩 Exhibitionoptions
$$.extend( 옵션, 모드. options, false );
//추가 확장
$$A.forEach( mode.methods, function( method, name ){
$$CE.addEvent( this, name, method );
}, this );
}, this );
}
init.apply( this, 인수 )
})();
地址
http://demo.jb51.net/js/ImageZoom_ext/ImageZoom_ext.htm
打包下载地址
http://www.jb51.net/jiaoben/25809.html
출처:http://www.cnblogs.com/cloudgamer/
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
