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) | 2007.10.18 |
|---|---|
| 막대 그래프 동적으로 보여주기 (0) | 2007.10.18 |
| XP 서비스팩2 팝업 대체용 공지 - 레이어이용, 쿠키 (0) | 2007.10.18 |
| XP 서비스팩2 팝업 대체용 공지 - 레이어이용, 쿠키 (0) | 2007.10.18 |
| 아이프레임을 드래그 해보자. (0) | 2007.10.18 |
| 본문 내용 글씨를 폰트 크기, 지정폰트, 축소, 확대 하기 (0) | 2007.10.18 |
| 본문 내용 글씨를 폰트 크기, 지정폰트, 축소, 확대 하기 (0) | 2007.10.18 |
| 강좌 설명시 html, script등의 내용을 컬로 코드로 변환 (0) | 2007.10.18 |
| 강좌 설명시 html, script등의 내용을 컬로 코드로 변환 (0) | 2007.10.18 |
| 타자연습기 (0) | 2007.10.18 |