이미지를 축소 확대하고 드래그
페이지 정보
작성자 서방님 댓글 0건 조회 76회 작성일 08-08-20 10:13본문
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> new document </title>
<meta name="generator" content="editplus">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<script language="javascript">
<!--
var view = function( _w , _h , _path , _parent ){
this.div = null;
this.w_d = _w;
this.h_d = _h;
this.img = null;
this.path_img = _path;
this.dx = 0;
this.dy = 0;
this.sx = 0;
this.sy = 0;
this._parent = _parent;
this.w_img = 0;
this.h_img = 0;
this.w_ori = 0;
this.h_ori = 0;
this.div_bottom = null;
this.zn = 1;
}
view.prototype.init = function(){
var thisPath = this;
this.div = document.createElement("div");
this.div.style.width = this.w_d;
this.div.style.height = this.h_d;
this.div.style.border = "solid 1px #CCCCCC";
this._parent.appendChild( this.div );
this.div.style.textAlign = "center";
this.div.style.fontFamily = "verdana";
this.div.style.fontSize = "8px";
this.div.style.color = "#AAAAAA";
this.div.innerHTML = "<br>loading...";
this.div.style.overflow = "hidden";
this.img = document.createElement("img");
this.div.appendChild( this.img );
this.img.src = this.path_img;
this.img.style.cursor = "move";
this.img.style.position = "relative";
this.img.style.left = "0px";
this.img.style.top = "0px";
this.img.onload = function(){
this.parentNode.removeChild( this.parentNode.childNodes[1] );
this.parentNode.removeChild( this.parentNode.childNodes[0] );
thisPath.w_img = thisPath.w_ori = this.width;
thisPath.h_img = thisPath.h_ori = this.height;
if( parseInt(thisPath.w_d) > parseInt(this.width) ){
thisPath.w_d = thisPath.div.style.width = this.width;
}
if( parseInt(thisPath.h_d) > parseInt(this.height) ){
thisPath.h_d = thisPath.div.style.height = this.height;
}
}
this.img.ondragstart = function(){
thisPath.sx = parseInt( thisPath.img.style.left );
thisPath.sy = parseInt( thisPath.img.style.top );
thisPath.dx = parseInt( event.x );
thisPath.dy = parseInt( event.y );
this.ondragend = function(){
thisPath.img.style.left = thisPath.sx + ( event.x - thisPath.dx );
thisPath.img.style.top= thisPath.sy + ( event.y - thisPath.dy );
if( ( thisPath.sx + ( event.x - thisPath.dx ) ) > 0 ){
thisPath.img.style.left = 0 ;
}
if( ( thisPath.sx + ( event.x - thisPath.dx ) ) < ( thisPath.w_d - thisPath.w_img ) ){
thisPath.img.style.left = ( thisPath.w_d - thisPath.w_img ) ;
}
if( ( thisPath.sy + ( event.y - thisPath.dy ) ) > 0 ){
thisPath.img.style.top = 0 ;
}
if( ( thisPath.sy + ( event.y - thisPath.dy ) ) < ( thisPath.h_d - thisPath.h_img ) ){
thisPath.img.style.top = ( thisPath.h_d - thisPath.h_img ) ;
}
}
}
this.div_bottom = document.createElement("div");
this.div_bottom.style.width = this.w_d;
this.div_bottom.style.height = "16px";
this.div_bottom.style.fontFamily = "verdana";
this.div_bottom.style.fontSize = "9px";
this.div_bottom.style.color = "#AAAAAA";
this.div_bottom.style.textAlign = "right";
this.div_bottom.style.paddingTop = "1px";
var btn_01 = document.createElement("a");
btn_01.innerHTML = " x 1 ";
btn_01.style.cursor = "hand";
btn_01.style.border = "solid 1px #AAAAAA";
btn_01.onclick = function(){
thisPath.zoom( 1 );
}
var btn_02 = document.createElement("a");
btn_02.innerHTML = " x 2 ";
btn_02.style.cursor = "hand";
btn_02.style.border = "solid 1px #AAAAAA";
btn_02.onclick = function(){
thisPath.zoom( 2 );
}
var btn_03 = document.createElement("a");
btn_03.innerHTML = " x 3 ";
btn_03.style.cursor = "hand";
btn_03.style.border = "solid 1px #AAAAAA";
btn_03.onclick = function(){
thisPath.zoom( 3 );
}
this._parent.appendChild( this.div_bottom );
this.div_bottom.appendChild( btn_01 );
this.div_bottom.appendChild( document.createTextNode(" ") );
this.div_bottom.appendChild( btn_02 );
this.div_bottom.appendChild( document.createTextNode(" ") );
this.div_bottom.appendChild( btn_03 );
this.div_bottom.appendChild( document.createTextNode(" ") );
var btn_all = document.createElement("a");
btn_all.innerHTML = "ShowAll";
btn_all.style.cursor = "hand";
btn_all.onclick = function(){
thisPath.showAll();
}
this.div_bottom.appendChild( btn_all );
}
view.prototype.showAll = function(){
var img_real = document.createElement("img");
img_real.style.position = "absolute";
img_real.style.zIndex = 99999;
img_real.src = this.path_img;
img_real.style.left = ( document.documentElement.offsetWidth / 2 ) - ( img_real.width / 2 );
img_real.style.top = document.documentElement.scrollTop - ( img_real.height / 2 ) ;
alert(this.div_bottom.scrollTop);
document.body.appendChild( img_real );
}
view.prototype.zoom = function( n ){
var nn = this.zn - n;
this.zn = n;
var tempx = parseInt( this.img.style.left ) - ( parseInt( this.w_d ) / 2 ) ;
var tempy = parseInt( this.img.style.top ) - ( parseInt( this.h_d ) / 2 ) ;
var tempw = parseInt( this.img.width );
var temph = parseInt( this.img.height );
var dx = 0;
var dy = 0;
var tx = 0;
var ty = 0;
if( nn != 0 ){
this.img.width = this.w_img = parseInt( this.w_ori ) * n ;
this.img.height = this.h_img = parseInt( this.h_ori ) * n ;
dx = parseInt( this.img.width ) / tempw; //비율
dy = parseInt( this.img.height ) / temph;
tx = parseInt( tempx * dx );
ty = parseInt( tempy * dy );
this.img.style.left = tx + ( this.w_d / 2 );
this.img.style.top = ty + ( this.h_d / 2 );
if( parseInt( this.img.style.left ) > 0 ) this.img.style.left = 0;
if( parseInt( this.img.style.top ) > 0 ) this.img.style.top = 0;
if( parseInt( this.img.style.left ) < ( ( this.img.width - this.w_d ) * -1 ) ) this.img.style.left = ( this.img.width - this.w_d ) * -1 ;
if( parseInt( this.img.style.top ) < ( ( this.img.height - this.h_d ) * -1 ) ) this.img.style.top = ( this.img.height - this.h_d ) * -1 ;
}
}
//-->
</script>
</head>
<body style="text-align:center">
</body>
</html>
<script language="javascript">
<!--
var imgview = new view( 400 , 400 , "http://seobangnim.xinour.net/zb5/file_download.php?filename=182b73d4f9b37c7bdde753b1a6889e83" , document.body );
imgview.init();
//-->
</script>
댓글목록
등록된 댓글이 없습니다.
