아이프레임을 드래그 해보자.

인터넷관련 2008. 2. 12. 11:13

invalid-file

<HTML>
<HEAD>
<TITLE>아이프레임 드래그</TITLE>
<link rel='stylesheet' type='text/css' href='include/style.css'>
<SCRIPT LANGUAGE="JavaScript">
//-----------------------------
//  원제작자:nzeo의 자바스크립트 스터디 게시판의 멀대님 
//  URL:http://www.nzeo.com/bbs/zboard.php?id=p_javascript&no=189
//  수정: 수정 삽질 전문 kaze;;
//  Home:http://subcase.net
//-----------------------------

//-----------------------------
//  드래그 기본 변수 설정
//-----------------------------
var ifdocDrag = false;                        // 드래그 불/가 를 저장할 논리변수
function docDrag(){                                // 마우스버튼이 눌려진 상태에서 드래그를 준비하는 함수
  ifdocDrag = true;                        // 드래그 '가능'
  originXtitle = titlebar.style.pixelLeft;        //원래의 타이틀바 X 좌표 (스타일에서의 'left')
  originYtitle = titlebar.style.pixelTop;                //원래의 타이틀바 T 좌표 (스타일에서의 'top')
  originXdoc = document.all['docFrame'].style.pixelLeft;        // 원래의 IFRAME X좌표 (스타일에서의 'left')
  originYdoc = document.all['docFrame'].style.pixelTop;        // 원래의 IFRAME Y좌표 (스타일에서의 'top')
  tempX = self.event.clientX;                                // 이벤트(mousedown)이 발생한 지금의 마우스 X좌표
  tempY = self.event.clientY;                                // 이벤트(mousedown)이 발생한 지금의 마우스 Y좌표
  document.onmousemove = docMove;                        // mousemove 이벤트 발생시(마우스 움직일때) docMove 함수 호풀
  document.onmouseup = new Function("ifdocDrag = false");        //mouseup 이벤트 발생시(마우스버튼이 띄어질때) 드래그 '불가'로
}

//-----------------------------
//  실제 드래그
//-----------------------------
function docMove(){                // 실제 IFRAME을 움직이는 함수
  if(ifdocDrag){                // 드래그 '가능'일때 
    titlebar.style.pixelLeft = originXtitle + self.event.clientX - tempX;
    // 타이틀바 X좌표는= [원래X] + [현재마우스의X] - [클릭한순간의(mousedown발생했을때의)마우스X]
    titlebar.style.pixelTop = originYtitle + self.event.clientY - tempY;
    // 타이틀바 Y좌표는= [원래Y] + [현재마우스의Y] - [클릭한순간의(mousedown발생했을때의)마우스Y]
    document.all['docFrame'].style.pixelLeft = originXdoc + self.event.clientX - tempX;
    // IFRAME의 Y좌표는= [원래Y] + [현재마우스의Y] - [클릭한순간의(mousedown발생했을때의)마우스Y]
    document.all['docFrame'].style.pixelTop = originYdoc + self.event.clientY - tempY;
    // IFRAME의 Y좌표는= [원래Y] + [현재마우스의Y] - [클릭한순간의(mousedown발생했을때의)마우스Y]   
    //우측으로 넘어가면
    if(titlebar.style.pixelLeft+titlebar.style.pixelWidth > document.body.clientWidth) {     
      titlebar.style.pixelLeft=document.body.clientWidth-titlebar.style.pixelWidth-1;
      document.all['docFrame'].style.pixelLeft=document.body.clientWidth-document.all['docFrame'].style.pixelWidth-2;
    }
    //좌측으로 들어가면
    if(titlebar.style.pixelLeft<0) {
      titlebar.style.pixelLeft=1;
      document.all['docFrame'].style.pixelLeft=2
    }   
    //하단으로 넘어가면
    if(titlebar.style.pixelTop+titlebar.style.pixelHeight > document.body.clientHeight) {     
      titlebar.style.pixelTop=document.body.clientHeight-titlebar.style.pixelHeight-1;
      document.all['docFrame'].style.pixelTop=document.body.clientHeight-document.all['docFrame'].style.pixelHeight-2;
    }
    //상단으로 들어가면
    if(titlebar.style.pixelTop<0) {
      titlebar.style.pixelTop=1;
      document.all['docFrame'].style.pixelTop=31
    }
  }
}

//-----------------------------
//  아이프레임 보이기
//-----------------------------
function showIframe(url,width,height) {
  document.all['docFrame'].src=url;
  if(width) document.all['docFrame'].style.pixelWidth=width;
  if(height) document.all['docFrame'].style.pixelHeight=height; 
  //위치를 중앙으로 지정
  document.all['docFrame'].style.pixelLeft = (document.body.clientWidth-document.all['docFrame'].style.pixelWidth)/2;
  document.all['docFrame'].style.pixelTop = (document.body.clientHeight-document.all['docFrame'].style.pixelHeight)/2;
  //타이틀 바가 아이프레임을 감싸도록 위치와, 크기 지정
  titlebar.style.pixelLeft=document.all['docFrame'].style.pixelLeft-1;
  titlebar.style.pixelTop=document.all['docFrame'].style.pixelTop-30;
  titlebar.style.pixelWidth=document.all['docFrame'].style.pixelWidth+2;
  titlebar.style.pixelHeight=document.all['docFrame'].style.pixelHeight+31;
 
  titlebar.style.filter='blendTrans(duration=1)'; // 실행시간(duration)을 정해준다.
  titlebar.filters.blendTrans.apply();
  titlebar.style.visibility = 'visible';
  titlebar.filters.blendTrans.play();
 
  document.all['docFrame'].style.filter='blendTrans(duration=1)'; // 실행시간(duration)을 정해준다.
  document.all['docFrame'].filters.blendTrans.apply();
  document.all['docFrame'].style.visibility = 'visible';
  document.all['docFrame'].filters.blendTrans.play();
  //titlebar.style.visibility = 'visible';
  //setTimeout("document.all['docFrame'].style.visibility = 'visible';",500);
}

//-----------------------------
//  아이프레임 감추기
//-----------------------------
function hideIframe() {
  titlebar.style.filter='blendTrans(duration=1)'; // 실행시간(duration)을 정해준다.
  titlebar.filters.blendTrans.apply();
  titlebar.style.visibility = 'hidden';
  titlebar.filters.blendTrans.play();
 
  document.all['docFrame'].style.filter='blendTrans(duration=1)'; // 실행시간(duration)을 정해준다.
  document.all['docFrame'].filters.blendTrans.apply();
  document.all['docFrame'].style.visibility = 'hidden';
  document.all['docFrame'].filters.blendTrans.play();
 
  //titlebar.style.visibility = 'hidden';
  //document.all['docFrame'].style.visibility = 'hidden';
}

//-----------------------------
//  타이틀바, 아이프레임 출력
//-----------------------------
with(document){
  //타이틀 바 
  writeln("<div id='titlebar' style='position:absolute;left:0;top:0;width:0px;height:0px;z-index:0;visibility:hidden'>");
  writeln("<table width='100%' Height=100% cellpadding=0 cellspacing=1 border=0 bgColor=BAB17C>");
  writeln("<tr height=28>");
  writeln("<td bgcolor=000000>");
  writeln("<table width=100% cellpadding=5 cellspacing=0>");
  writeln("<tr>");
  writeln("<td onmousedown='docDrag()'  style=cursor:hand>");
  writeln("<img src=img/res_ovr.gif align=absmiddle>");
  writeln("</td>");
  writeln("<td width=20 align=right style=cursor:hand>");
  writeln("<span onclick='hideIframe()'><img src=img/close_ovr.gif align=absmiddle></span>");
  writeln("</td>");
  writeln("</tr>");
  writeln("</table>");
  writeln("</td>");
  writeln("<tr>");
  writeln("<td bgcolor=000000 valign=top>");
  writeln("<span class=scrollbox></span>");
  writeln("</td>");
  writeln("</tr>");
  writeln("</table>");
  writeln("</div>");
  //아이 프레임
  writeln("<iframe  name='docFrame'  id='docFrame' style='position:absolute;left:0;top:0;width:0px;height:0px;z-index:1;visibility:hidden' src='http://oxtag.com/html/marquee.html' border=0 frameborder=0 scrolling=no></iframe>");
}
</SCRIPT>
</HEAD>

<BODY  ondragstart='return false' onselectstart='return false' unselectale=on style="margin-right:0;" marginwidth=0 bgcolor="#000000">
<span onclick=javascript:showIframe('http://oxtag.com/html/marquee.html',750,500) style=cursor:hand;color:ffffff>700x500 사이즈</span><br>
<span onclick=javascript:showIframe('http://oxtag.com/html/marquee.html') style=cursor:hand;color:ffffff>사이즈를 정의하지 않았을 때</span><br>
<span onclick=javascript:showIframe('http://oxtag.com/html/marquee.html',500,400) style=cursor:hand;color:ffffff>500x400 미니위니</span><br>

</bODY>
</HTML>


--------------------------------------------------------------------------------



<HTML>
<HEAD>
<TITLE> 아이프레임 드래그 + 창 최대화 + 이전 크기 복귀 </TITLE>
<!-- //////////////////////////////////////////////////////////////
//*****************************************************************
// Web Site: http://www.CginJs.Com
// CGI 와 JavaScript가 만났을 때 = C.n.J ☞ http://www.CginJs.Com
// CGI 와 JavaScript가 만났을 때 = C.n.J ☞ webmaster@CginJs.Com
// C.n.J 자바스크립트 자동 생성 마법사 ☞ http://www.CginJs.Com
// C.n.J 자바스크립트(JavaScript) 가이드 ☞ http://www.CginJs.Com
// C.n.J CSS(Cascading Style Sheet) 가이드 ☞ http://www.CginJs.Com
// Editer : Web Site: http://www.CginJs.Com
//*****************************************************************
/////////////////////////////////////////////////////////////// -->
<script Language="Javascript">
document.write('<st'+'yle>');
document.write('td {font-size:12px; font-family:굴림; text-decoration:none; }');
document.write('A:link,A:active,A:visited{text-decoration:none;font-size:12PX;color:#333333;}');
document.write('A:hover {text-decoration:none; color:ff9900}');
document.write('font { font-size: 9pt; }');
document.write('.cnj_input {background-color:gray; width:200px; height:200px; position:absolute; left:0px; top:0px; z-index:1; cursor:hand; layer-background-color:navy;}');
document.write('.cnj_input2 { width:0px; height:18px; position:absolute; left:0px; top:0px; z-index:1;}');
document.write('.cnj_input3 { border-width:1; border-style:solid; border-color:#000000; color:#0084D4; background-color:white;cursor:hand;}');
document.write('.cnj_input4 { scrollbar-face-color: #FFCC33;scrollbar-shadow-color: #ffffff;scrollbar-highlight-color: #F3f3f3;scrollbar-3dlight-color: #ffffff;scrollbar-darkshadow-color: #F3f3f3;scrollbar-track-color: #ffffff;scrollbar-arrow-color: #f9f9f9;cursor:hand; }');
document.write('</st'+'yle>');
var dragapproved=false
var minrestore=0
var initialwidth,initialheight
var ie5=document.all&&document.getElementById
var ns6=document.getElementById&&!document.all

function drag_drop(e){
if (ie5&&dragapproved&&event.button==1){
document.getElementById("cnjid").style.left=tempx+event.clientX-offsetx
document.getElementById("cnjid").style.top=tempy+event.clientY-offsety
}
else if (ns6&&dragapproved){
document.getElementById("cnjid").style.left=tempx+e.clientX-offsetx
document.getElementById("cnjid").style.top=tempy+e.clientY-offsety
}
}

function initializedrag(e){
offsetx=ie5? event.clientX : e.clientX
offsety=ie5? event.clientY : e.clientY
if (ie5)
document.getElementById("saver").style.display=''

tempx=parseInt(document.getElementById("cnjid").style.left)
tempy=parseInt(document.getElementById("cnjid").style.top)

dragapproved=true
document.onmousemove=drag_drop
}

function loacnjid(url,width,height){ // 윈도우 팝업창 로드 부분
if (!ie5&&!ns6)
window.open(url,"","width=width,height=height,scrollbars=1")
else{
document.getElementById("cnjid").style.display=''
document.getElementById("cnjid").style.width=initialwidth=width
document.getElementById("cnjid").style.height=initialheight=height

// 팝업창의 윈도우 왼쪽 마진
document.getElementById("cnjid").style.left=30 

// 팝업창의 윈도우 상단 마진
document.getElementById("cnjid").style.top=ns6? window.pageYOffset*1+30 : document.body.scrollTop*1+30

// 윈도우 창의 iframe (iframe id : cframe) 로딩되는 부분
document.getElementById("cframe").src=url 
}
}

function maximize(){  // 전체창 모드 부분
if (minrestore==0){
minrestore=1 //maximize window

// 최대창으로 전환시 이미지
document.getElementById("maxname").setAttribute("src","./img/res_up.gif")

document.getElementById("cnjid").style.width=ns6? window.innerWidth-20 : document.body.clientWidth
document.getElementById("cnjid").style.height=ns6? window.innerHeight-20 : document.body.clientHeight
} else {
minrestore=0 //restore window

// 최대창시 이미지
document.getElementById("maxname").setAttribute("src","./img/res_ovr.gif") 
document.getElementById("cnjid").style.width=initialwidth
document.getElementById("cnjid").style.height=initialheight
}
document.getElementById("cnjid").style.left=ns6? window.pageXOffset : document.body.scrollLeft
document.getElementById("cnjid").style.top=ns6? window.pageYOffset : document.body.scrollTop
}

function closeit(){  // 닫기 부분
document.getElementById("cnjid").style.display="none"
}

if (ie5||ns6)
document.onmouseup=new Function("dragapproved=false;document.onmousemove=null;document.getElementById('saver').style.display='none'")

// 참고로 cnjid는 부분이 아래의 레이어 id와도 부분과도 동일해야 함
</script>
</HEAD>

<BODY>

<div id="cnjid" class="cnj_input" onMousedown="initializedrag(event)" onSelectStart="return false">
<div align="right">
<img src="./img/res_ovr.gif" id="maxname" onClick="maximize()"><img src="./img/close_ovr.gif" onClick="closeit()"></div>
<iframe id="cframe" src="" width=100% height=100%></iframe>
<div id="saver" class="cnj_input2"><p> </p></div>
</div>

<script>
// 웹페이지 로딩시
// 윈도우창의 크기는 300,200 이부분을 수정하면 됩니다.
if (ns6) window.onload=new Function('loacnjid("http://oxtag.com/html/marquee.html",500,500)')
else
loacnjid("http://oxtag.com/html/marquee.html",500,500)
</script>
<!--일반 텍스트 링크 지정 할때 -->
<a href="javascript:loacnjid('http://oxtag.com/html/marquee.html',500,500)">일반 링크</a>

</BODY>
</HTML>

'인터넷관련' 카테고리의 다른 글

입력 상자 증가 폼  (0) 2008.02.12
인풋 태그에 글쓰기  (0) 2008.02.12
막대 그래프 동적으로 보여주기  (0) 2008.02.12
본문 내용 글씨를 폰트 크기, 지정폰트, 축소, 확대 하기  (0) 2008.02.12
XP 서비스팩2 팝업 대체용 공지 - 레이어이용, 쿠키  (0) 2008.02.12
동영상과 자막 같이 보기  (0) 2008.02.12
강좌 설명시 html, script등의 내용을 컬로 코드로 변환  (0) 2008.02.12
새창(팝업) 가로/세로 크기 조절  (0) 2008.02.12
Posted by 알 수 없는 사용자
,

티스토리툴바