태그 자료실

회원가입∴아이디/비번찾기

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

운.영.자.1대1.상담

스마트라디오(Smart Radio)

음악방송 앱 다운로드

E.Q. Christmas Tree

E.Q. 오디오 플레이어

컴퓨터 오목

멀티 동영상 플레이어

실시간 TV보기

myTUBE MOVIE PLUS

MODEL HOT MOVIES

스마트웹 에서 음악감상

K-POP 걸그룹 MV 2023

레이어 안의 이미지 마우스로 지도 움직이듯이 이동하는 자바스크립트

13년 전

<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>

추천 : 453

번호	제목
115	제이쿼리 랜덤으로 배경색 변경
114	CSS border-image 속성
113	이미지 없을때 대체 이미지 출력
112	3D 입체 갤러리 (바람개비 느낌) 상,하,좌,우 드래그 가능
111	3D 입체 갤러리
110	썸네일 소스[GD 사용]
109	PHP를 이용한 이미지 사이즈 편집마스터
108	이미지의 가로크기가 지정한 것보다 크면 자동 크기 축소/확대
107	이미지가 지정크기보다 클 때만 자동리사이즈
106	1 분마다 빠뀌는 배경
105	html 파일 없이 이미지 크기대로 창 띄우기 - 스크립트소스
104	이미지가 없을때 noimg 출력
103	이미지 사이즈를 알려주는 함수
102	이미지에 마우스 오버시 효과주기
101	배경이미지 왼쪽, 오른쪽, 가운데 에 고정시키기
100	미디어 플레이어, 버퍼링, 재생, 정지, 일시정지
99	텍스트 필드에 있는 이미지를 마우스 클릭시 사라지게 하기!
98	이미지크기로 새창띄우기, 띄운창 이미지 클릭하면 창닫기
97	jpg 로드무비시 프리로더 달기
	레이어 안의 이미지 마우스로 지도 움직이듯이 이동하는 자바스크립트
95	태그로 png 투명 이미지 처리하기
94	배경이미지 고정(body/table) - background-repeat: no-repeat;
93	이미지를 지정된 비율로 자르기 (crop)
92	이미지 에러시 대체이미지 표현
91	jQuery 애니메이트로 만들어보는 이미지 슬라이더와 전광판
90	이미지의 색상을 내맘대로
89	jquery 이미지 슬라이드
88	jquery 이미지 뷰어
87	이미지 경로 에러시 대체 이미지 보여주기(엑박 안뜨게하기) - onError Event
86	HTML문서에 그라데이션 표현하기

뮤직트로트 부산광역시 부산진구 가야동 ㅣ 개인정보취급방침
Copyright ⓒ musictrot All rights reserved.