Html,Jsp,Css

* 스크롤 배너 만들기

<html>
 <head>
  <title> 스크롤 배너 만들기 </title>
  <style>
	#banner {position:absolute;width:100px;height:100px;
			 top:100px;left:100px;
			 border:1px solid #000000;}

                        /*본문내용과 관계 없이 위치설정:absolute*/
  </style>
  <script>// 화면크기등이 바뀌어도 같은 값을 유지해야 하므로 함수 생성
  function bannerScroll(){
	// document 크기(윈도우크기)
	winSizeWidth = document.body.clientWidth; // 너비
	winSizeHeight = document.body.clientHeight; // 높이
	// 스크롤바의 위치구하기
	scrollTop = document.body.scrollTop; // X좌표
	scrollLeft = document.body.scrollLeft; // Y좌표

	// 배너의 div 좌표변경
	banner.style.top = winSizeHeight - 220 + scrollTop;
	banner.style.left = winSizeWidth - 140 + scrollLeft;
	setTimeout("bannerScroll()",1);
  }
  </script>
 </head>

 <body onLoad="bannerScroll()"><!--본문 대충-->
  <img src="../html/img/dog.jpg"><br>
  <img src="../html/img/dog.jpg"><br>
  <img src="../html/img/dog.jpg"><br>
  <img src="../html/img/dog.jpg"><br>
  <img src="../html/img/dog.jpg"><br>
  <img src="../html/img/dog.jpg"><br>
  <img src="../html/img/dog.jpg"><br>
  <img src="../html/img/dog.jpg"><br>
  <img src="../html/img/dog.jpg"><br>
  <!--배너 만들기-->
  <div id="banner"><!--div태그내 이미지는 백그라운드가 없을시 투명하게 보임-->
  <a href="#">
  <img src="../html/img/1.jpg" border="0" width="100"></a><br>
  <a href="#">
  <img src="../html/img/1.jpg" border="0" width="100"></a><br>
  </div>
 </body>
</html>

# 결과

스크롤배너.html

* div를 이용한 본문내 삽입되는 팝업창 만들기

<html>
 <head>
  <title> Div를 이용한 팝업 </title>  
  <script>
 /* function Close(){
	document.all['pop'].style.visibility="hidden";}
    △ 닫기버튼 클릭시 div가 닫히도록 할때 ② : img에 함수선언 */
moveX=0; moveY=0; // moveXX=0; moveYY=0; 변수선언 없이 바로 입력했으므로 얘도 없앰
divX=100; divY=100;
  function mouseDrag(){
	// 현재 마우스 좌표 (클릭했을 때)
	moveX = event.clientX; // 이동전
	moveY = event.clientY; // 이동전
	// 현재 div의 좌표
	divX = pop.style.pixelLeft; // left 라 치면 오류 pixelLeft로 수정
	divY = pop.style.pixelTop; // top 이라 치면 오류 pixelTop으로 수정
	// 이동이 일어나야만 움직이도록 설정▽
	// document에서 event처리
	document.onmousemove = mouseDragDrop; // document에서 마우스 이동이 일어나면..
	// document로 하면 빨리 움직여도 잘 따라오지만 오른쪽 마우스 클릭 후 왼쪽마우스로
	// 아무영역이나 선택하면 창이 이동해버리는 버그(?)가 있어
	// document를 pop으로 바꾸면 버그는 없으나 클릭 후 조금만 빠르게 움직여도
	// 영역을 벗어나는지 컨트롤이 되지 않는다.
	// 또하나, 본문에 아무 영역이나 마구잡이로 클릭하다 보면 팝업창이 따라온다;;
	// 또.. 팝업안에 이미지를 클릭후 놓지 않고 다른영역으로 포인터 이동시
	// 무작위로 이동한다.
	// mouseDragDrop 호출 : document에서의 함수 호출에는 ()가 없어도 된다
	}

	function mouseDragDrop(){
	if (event.button == 1) // 왼쪽버튼 확인(1:왼쪽,2:오른쪽)
	{
	// 마우스 이동 후 좌표 이걸 변수에 안넣고 바로 적용해보면 오류 해결?
	// moveXX = event.clientX;
	// moveYY = event.clientY;
	// 움직인 거리를 구하여 Div에 Setting
	pop.style.pixelLeft = event.clientX - moveX + divX; 
	// left 라 치면 오류 pixelLeft로 수정
	pop.style.pixelTop = event.clientY - moveY + divY; 
	// top 이라 치면 오류 pixelTop으로 수정
	
	// left=움직이고 난 후의 클릭좌표 moveXX-처음 클릭 좌표 moveX + 현재 div의 좌표 divX
	}}
	
	
  </script>
 </head>

 <body>
  <img src="../html/img/dog.jpg"><br>
  <img src="../html/img/dog.jpg"><br>
  <img src="../html/img/dog.jpg"><br>
  <!--최초에 뜨는 팝업의 좌표 및 속성-->
<div id="pop" style="position:absolute; width:300; height:300; top:100; left:100;
	 border:1px solid #33660">
<table width="300" border=0 cellpadding="0" cellspacing="0">
	<tr>
	<td width="300" bgcolor="white" onMouseDown="mouseDrag()"></td>
	<!--△ 마우스 누른상태(onMouseDown)로 이동
		클릭좌표, 이동좌표 체크
		자바스크립트에 이벤트라는 내장 좌표가 있다
		event.clientX=X ..이런식 -->
	<td align="right" bgcolor="white"><img src="x.gif" 
                 onClick="pop.style.visibility='hidden'"></td>
	<!--△ 닫기버튼 클릭시 div가 닫히도록 할때 ①-->
	</tr>
	<tr>
	<td colspan="2"><a href="http://www.hrd.go.kr/jsp/HRDV/index.jsp">
	<img src="1.gif" border="0"></a></td>
	</tr>
	</table>
</div>
  
 </body>
</html>

# 결과

div를이용한팝업.html

* 이미지 클릭하여 큰 이미지 나오는 갤러리 만들기

<html>
 <head>
  <title> 갤러리 </title>  
  <script>
 /* function Close(){
	document.all['pop'].style.visibility="hidden";}
    △ 닫기버튼 클릭시 div가 닫히도록 할때 ② : img에 함수선언 */
moveX=0; moveY=0; // moveXX=0; moveYY=0; 변수선언 없이 바로 입력했으므로 얘도 없앰
divX=100; divY=100;
  function mouseDrag(){
// 현재 마우스 좌표 (클릭했을 때)
moveX = event.clientX; // 이동전
moveY = event.clientY; // 이동전
// 현재 div의 좌표
divX = pop.style.pixelLeft; // left 라 치면 오류 pixelLeft로 수정
divY = pop.style.pixelTop; // top 이라 치면 오류 pixelTop으로 수정
// 이동이 일어나야만 움직이도록 설정▽
// document에서 event처리
document.onmousemove = mouseDragDrop; // document에서 마우스 이동이 일어나면..
// document로 하면 빨리 움직여도 잘 따라오지만 오른쪽 마우스 클릭 후 왼쪽마우스로
// 아무영역이나 선택하면 창이 이동해버리는 버그(?)가 있어
// document를 pop으로 바꾸면 버그는 없으나 클릭 후 조금만 빠르게 움직여도
// 영역을 벗어나는지 컨트롤이 되지 않는다.
// 또하나, 본문에 아무 영역이나 마구잡이로 클릭하다 보면 팝업창이 따라온다;;
// 또.. 팝업안에 이미지를 클릭후 놓지 않고 다른영역으로 포인터 이동시
// 무작위로 이동한다.
// mouseDragDrop 호출 : document에서의 함수 호출에는 ()가 없어도 된다
}
function mouseDragDrop(){
if (event.button == 1) // 왼쪽버튼 확인(1:왼쪽,2:오른쪽)
{
// 마우스 이동 후 좌표 이걸 변수에 안넣고 바로 적용해보면 오류 해결?
// moveXX = event.clientX;
// moveYY = event.clientY;
// 움직인 거리를 구하여 Div에 Setting
pop.style.pixelLeft = event.clientX - moveX + divX; 
// left 라 치면 오류 pixelLeft로 수정
pop.style.pixelTop = event.clientY - moveY + divY; 
// top 이라 치면 오류 pixelTop으로 수정
	
// left=움직이고 난 후의 클릭좌표 moveXX-처음 클릭 좌표 moveX + 현재 div의 좌표 divX
}}
	
function pIC(n){
	// div의 이미지 파일명 변경 eval 잊지 말자...
	// 일전에 eval 안넣고 왜 안되지 왜 안되지 했네 -_-
	// 경로에 document.ID를 하면 오류가 난다.
	// ID.src = ........
	eval("changeImg.src='img_0"+n+"_big.jpg'");
	pop.style.pixelLeft = event.clientX; 
	// 현재 발생한 이벤트에 X좌표를 입력해서 대입하라
	pop.style.pixelTop = event.clientY
	// 현재 발생한 이벤트에 Y좌표를 입력해서 대입하라
	pop.style.visibility = "visible";
	// pop을 보여라
	}
	
  </script>
 </head>

 <body>
 <!--이미지리스트-->
  <img src="img_01_small.jpg" onClick="pIC('1')">
  <img src="img_02_small.jpg" onClick="pIC('2')">
  <img src="img_03_small.jpg" onClick="pIC('3')">
  <img src="img_04_small.jpg" onClick="pIC('4')"><br>
  <img src="img_05_small.jpg" onClick="pIC('5')">
  <img src="img_06_small.jpg" onClick="pIC('6')">
  <img src="img_07_small.jpg" onClick="pIC('7')">
  <img src="img_08_small.jpg" onClick="pIC('8')">
  <!--최초에 뜨는 팝업의 좌표 및 속성-->
<div id="pop" style="position:absolute; width:300; height:200; top:60; left:60;
	 border:1px solid #33660; visibility:hidden"> <!-- 초기값: 이미지 숨김 -->
	<table width="300" border=0 cellpadding="0" cellspacing="0">
		<tr>
		<td width="300" bgcolor="white" onMouseDown="mouseDrag()"></td>
		<!--△ 마우스 누른상태(onMouseDown)로 이동
			클릭좌표, 이동좌표 체크
			자바스크립트에 이벤트라는 내장 좌표가 있다
			event.clientX=X ..이런식 -->
		<td align="right" bgcolor="white"><img src="../x.gif" 
                        onClick="pop.style.visibility='hidden'"></td>
		<!--△ 닫기버튼 클릭시 div가 닫히도록 할때 ①-->
		</tr>
		<tr height="200">
			<td colspan="2">
			<img src="img_01_big.jpg" border="0" id="changeImg"></td>
			<!-- 함수에서 제어를 위해 changeImg라는 id 부여 -->
		</tr>
	</table>
</div>  
 </body>
</html>

# 결과

작은 사진을 클릭하면 마우스포인터의 현재 위치에 큰 사진이 div팝업창으로 뜨고 그 창의 윗부분을 잡고 움직일 수 있도록 구현
하고 X버튼을 눌러 창을 끌 수 있다. 웹 호스팅 계정이 없어 구현에 이미지 링크를 통한 소스 재작성으로도 어려움이 있어
스크린샷으로 대체함

저작자표시 비영리 변경금지

'Html/Jsp/Javascript' 카테고리의 다른 글

[Javascript] 배열 최대값 / 최소값 (0)	2013.01.23
jQuery.ajax(options) (0)	2013.01.22
Html,Jsp,Css_09 (0)	2011.10.20
Html,Jsp,Css_08 (0)	2011.10.19
Html,Jsp,Css_07 (0)	2011.10.18

나만의 시간은 없다

Html,Jsp,Css_10

'Html/Jsp/Javascript' 카테고리의 다른 글

티스토리툴바

Html,Jsp,Css_10

'Html/Jsp/Javascript' 카테고리의 다른 글

'Html/Jsp/Javascript' Related Articles

티스토리툴바