<script language="Javascript1.1">
/*
desc : 레이어 안의 이미지가 클 경우 스크롤이 생성되게 하고 마우스로 이미지 끌어 이동시키는...
지도 찾기 생각하면 될듯...작업 중 필요한 일이 생겨 만들게 되었는데...그런데로 쓸만한듯....이미지가 크면 버벅대서 문제이기도...-0-;;;
date : 2007-04-18
by zekill
*/
///////////////////////////////////////////////////////////////
///////레이어 안의 이미지 마우스로 움직이기 시작///////////////
/////////////////////////////////////////////////////////////
var g_bMouseDown = false;
var g_nChangePositionX = 0;
var g_nChangePositionY = 0;
var g_layerBackground = null;
function IntValue(num){
var temp = parseInt(num); if(isNaN(temp)){ temp = 0; } return temp;
}
function js_moving_object_up() {
g_bMouseDown = false;
}
function js_moving_object_down(target, event) {
var evt = event||window.event;
if(target.style.cursor == "move") {
g_bMouseDown = true;
g_nChangePositionX = evt.clientX;
g_nChangePositionY = evt.clientY;
}
}
function js_moving_object_move(e) {
if(g_bMouseDown) {
var evt = e||window.event;
var distX = g_nChangePositionX - IntValue(evt.clientX);
var distY = g_nChangePositionY - IntValue(evt.clientY);
var background = g_layerBackground;
var maxRight = background.scrollWidth - background.clientWidth;
var maxBottom = background.scrollHeight - background.clientHeight;
if(background.scrollLeft <= maxRight) {
if( (background.scrollLeft == maxRight && distX > 0) || (background.scrollLeft == 0 && distX < 0) ) {
} else {
background.scrollLeft += distX;
g_nChangePositionX = IntValue(evt.clientX);
}
}
if(background.scrollTop <= maxBottom) {
if( (background.scrollTop == maxBottom && distY > 0) || (background.scrollTop == 0 && distY < 0) ) {
} else {
background.scrollTop += distY;
g_nChangePositionY = IntValue(evt.clientY);
}
}
return false;
}
}
//이놈으로 시작 js_moving_object(이미지개체, 배경레이어개체)
function js_moving_object(target, layer_background){
try{
target.style.position='relative';
target.style.zIndex='9999';
target.style.left='0px';
target.style.top='0px';
}catch(e){}
target.style.cursor = "move";
target.onmousedown = function(event){ js_moving_object_down(target, event); }
target.onmouseup = js_moving_object_up;
target.onmouseout = js_moving_object_up;
target.onmousemove = js_moving_object_move;
g_layerBackground = layer_background;
}
///////////////////////////////////////////////////////////////
///////레이어 안의 이미지 마우스로 움직이기 종료///////////////
//////////////////////////////////////////////////////////////
</script>
<div name="layer_mainThumb" id="layer_mainThumb" style="width:747px; height: 472px;overflow-x:scroll; overflow-y:scroll;">
<img name="mainThumb" id="mainThumb" src="image url">
<div>
<script>
js_moving_object(document.getElementById("mainThumb"), document.getElementById("layer_mainThumb"));
</script>