JS_javascript 기술을 사용하여 확대/축소, 드래그, 닫기 및 최소화할 수 있는 부동 창의 전체 예

이 기사의 예에서는 확대/축소, 드래그, 닫기 및 최소화가 가능한 부동 창을 구현하는 JS 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

JS实现可缩放, 拖动, 关闭와 最smallized浮动窗口 .divWindow{word-wrap:break-word;위치:절대; 오버플로:숨김;} .divBar{border:#000000 1px solid;position:absolute;border-bottom:#000000 1px solid;width:100%;height:20px; background-color:#0099FF;cursor:hand;line-height:20px;} .divChange{위치:absolute;right:25px;font-size:10pt;} .divClose{위치:absolute;right:5px;font-size:11pt;} .divTitle{position:absolute;left:5px;font-size:10pt;white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;overflow: hide;} .divContent{border:#000000 1px solid;border-top:#000000 0px solid;position:absolute; 상단:20px;폭:100%; 배경색:#FFFFFF; 오버플로-y:자동; 스크롤바 기본 색상: #FFFFFF;스크롤바 화살표 색상: #999999;스크롤바 얼굴 색상: #EEEEEE;스크롤바 강조 색상: #EEEEEE; 스크롤바-그림자 색상: #EEEEEE;스크롤바-3DLIGHT-COLOR: #FFFFFF;스크롤바-트랙-색상: #FFFFFF;스크롤바-DARKSHADOW-COLOR: #CCCCCC;} .divReSize{높이:7px; 너비:7px; 오버플로:숨김; 배경색:#0000FF; 위치:절대; 하단:6px; 오른쪽:6px; 커서:nw-크기 조정} .divIframe{높이:100%;너비:100%;} var zindex=0 //전체 전체수 함수 dragClass(이름, 제목, 내용, 왼쪽, 위쪽, 너비, 높이){ var isMouseDown=false; var 최대값=false; var offX=0; //设置抓取点X坐标 var offY=0; //设置抓取点Y坐标 var oldLeft; //保存正常状态的X坐标 var oldTop; //保存正常状态的Y坐标 this.mousedown= function (){ //아래로 내리기 Bar.setCapture(); //设置抓取 offX=parseInt(event.clientX)-parseInt(Window.style.left); offY=parseInt(event.clientY)-parseInt(Window.style.top); isMouseDown=true; if(Window.style.zIndex zindex ; Window.style.zIndex=zindex; } } this.mousemove= function (){ //拖动窗口 if (isMouseDown && !maximum){ Bar.style.cursor='이동' Window.style.left=event.clientX-offX; Window.style.top=event.clientY-offY; if(Window.style.zIndex zindex ; Window.style.zIndex=zindex; } } } this.mouseup=function (){ //松开按钮 Bar.releaseCapture(); //取消抓取 Bar.style.cursor='손'; if (parseInt(Window.style.top) Window.style.top='0px'; } if (parseInt(Window.style.left) Window.style.left='0px'; } isMouseDown=false; } this.dblclick=function (){ //双击最大最소화 if (!최대){ oldLeft=Window.style.left; //保存正常状态的X坐标 oldTop=Window.style.top; //保存正常状态的Y坐标 Window.style.left='0px'; Window.style.top='0px'; Window.style.width= document.body.clientWidth; //网页可见区域宽 Title.style.width=(document.body.clientWidth-40) 'px'; //设置标题长道 ReSize.style.display='없음'; if(Change.innerText=='-'){ Window.style.height='100%'; Content.style.height=document.body.clientHeight-20; //网页可见区域宽-标题고도 }그밖에{ Window.style.height='20px'; } 최대=참; }그밖에{ Window.style.left=oldLeft; Window.style.top=oldTop; Window.style.width=너비 'px'; Title.style.width=(너비-40) 'px'; ReSize.style.display=''; if(Change.innerText=='-'){ Window.style.height=높이 'px'; Content.style.height=parseInt(height-20) 'px'; }그밖에{ Window.style.height='20px'; } 최대=거짓; } if(Window.style.zIndex zindex ; Window.style.zIndex=zindex; } } this.changeWindow=function (){ //실행하기 event.cancelBubble=true; if(Change.innerText=='-'){ Window.style.height='20px'; Change.innerText='□'; Content.style.display='없음'; ReSize.style.display='없음'; }그밖에{ if (최대){ Window.style.height='100%'; Content.style.display=''; ReSize.style.display=''; Content.style.height=document.body.clientHeight-20; //网页可见区域宽-标题고도 }그밖에{ Window.style.height=높이 'px'; Content.style.display=''; ReSize.style.display=''; Content.style.height=parseInt(height-20) 'px'; } Change.innerText='-'; } }

var Window=document.createElement("div"); Window.id="divWindow" 이름; Window.className="divWindow"; Window.style.left=왼쪽 'px'; Window.style.top=top 'px'; Window.style.width=너비 'px'; Window.style.height=높이 'px'; Window.onclick=function(){ if(parseInt(Window.style.zIndex) zindex ; Window.style.zIndex=zindex; } } this.Window=창; //공용 속성은 클래스 외부에서 작동할 수 있습니다. 클래스 외부에서 작동하려면 해당 요소를 공용 속성으로 변경할 수 있습니다

var Bar=document.createElement("div"); Bar.id="divBar" 이름; Bar.onselectstart="return false"; Bar.className="divBar"; Bar.onmousedown=this.mousedown; Bar.ondblclick=this.dblclick; Bar.onmousemove=this.mousemove; Bar.onmouseup=this.mouseup; Window.appendChild(Bar); var Title=document.createElement("span"); Title.id="divTitle" 이름; Title.className="divTitle"; Title.style.width=(width-40) 'px'; //적응형 제목 길이 Title.innerText=제목; Bar.appendChild(제목); var Change=document.createElement("span"); Change.id="divChange" 이름; Change.className="divChange"; Change.innerText="-"; Change.ondblclick=this.changeWindow; Change.onclick=this.changeWindow; Bar.appendChild(변경); var Close=document.createElement("span"); Close.id="divClose" 이름; Close.onclick=function(){ Window.style.display='없음'; } Close.className="divClose"; Close.innerText="×"; Bar.appendChild(닫기); var Content=document.createElement("div"); Content.id="divContent" 이름; Content.className="divContent" Content.innerHTML=content; Content.style.height=parseInt(height-20) 'px'; Window.appendChild(콘텐츠);

document.body.appendChild(창); }

//dragClass(ID, 창 제목, 내용, X 좌표, Y 좌표, 너비, 길이) var c1="창 1 창 1 창 1 창 1 창 1 창 1 창 1 창 1 창 1 창 1 창 1 창 1 창 1 창 1 창 1 창 1 창 1 창 1 창 1 창 1 창 1 창 1 창 1 창 1"; objWin1=new dragClass('win1','드래그 창 1',c1,0,150,300,300); var c2="창 2 창 2 창 2 창 2 창 2 창 2 창 2 창 2 창 2 창 2 창 2 창 2 창 2 창 2 창 2 창 2 창 2 창 2 창 2 창 2 창 2 창 2 창 2 창 2 창 2"; objWin2=new dragClass('win2','드래그 창 2',c2,350,150,300,300); var objWin3; 함수 openWin(){ if(objWin3==null){ var c3="123 창 3 창 3 창 3 창 3 창 3 창 3 창 3 창 3 창 3 창 3 창 3 창 3 창 3 창 3 창 3 창 3 창 3 창 3 창 3 창 3 창 3 창 3 창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3창 3 창 3 창 3 창 3 창 3 창 3 창 3 창 3 창 3 창 3 창 3 창 3 창 3 창 3 창 3 창 3"; objWin3=새 dragClass('win3',c3,c3,700,150,300,300); }그밖에{ If(objWin3.Window.style.display=='없음'){ objWin3.Window.style.display=''; } } }