이 기사에서는 JS가 조정, 드래그, 닫고 최소화 할 수있는 부유 식 창을 구현하는 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
코드를 다음과 같이 복사하십시오.
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<title> js는 스케일링, 드래그, 닫히고 최소화 할 수있는 플로팅 창을 구현합니다 </title>
</head>
<스타일 유형 = "텍스트/CSS">
.divwindow {Word-Wrap : Break-Word; 위치 : 절대; 오버플로 : 숨겨진;}
.divbar {테두리 :#000000 1px 솔리드; 위치 : 절대; 경계-바닥 :#000000 1px 고체; 폭 : 높이 : 높이 : 20px; 배경색 :#0099ff; 커서 : 핸드-라인-리이트 : 20px;}
.divChange {위치 : 절대; 오른쪽 : 25px; font-size : 10pt;}
.divclose {위치 : 절대; 오른쪽 : 5px; font-size : 11pt;}
.divtitle {위치 : 절대; 왼쪽; 왼쪽 : 5px; font-size : 10pt; 흰색 공간 : nowrap; 텍스트-오버 플로우 : 엘립스 시스; -o-text-overflow : elipsis; 오버플로 : 숨겨진;}
.divContent {Border :#000000 1px Solid; 경계선 :#000000 0px Solid; 위치 : 절대; 상단 : 20px; 너비 : 100%; 배경색 : #fffff; 오버플로 -Y : 자동;
Scrollbar-Base-Color : #fffff; Scrollbar-Arrow-Color : #999999; Scrollbar-Face-Color : #eeeee; Scrollbar-Highlight-Color : #eeeeee;
Scrollbar-Shadow-Color : #eeeee; scrollbar-3dlight-color : #fffff; scrollbar-track-color : #fffff; scrollbar-darkshadow-color : #cccccc;}
.divresize {높이 : 7px; 너비 : 7px; 오버플로 : 숨겨진; 배경색 :#0000ff; 위치 : 절대; 하단 : 6px; 오른쪽 : 6px; 커서 : NW-Resize}
.diviframe {높이 : 100%; 너비 : 100%;}
</스타일>
<script language = "javaScript">
var zindex = 0 // 전역 변수
함수 드래그 클래스 (이름, 제목, 내용, 왼쪽, 상단, 너비, 높이) {
var ismousedown = false;
var maximum = false;
var offx = 0; // 횡령 지점의 X 좌표를 설정합니다
var offy = 0; // 횡령 지점의 y 좌표를 설정합니다
var oldleft; // X 좌표를 일반 상태로 저장합니다
var oldtop; // y 좌표를 일반 상태로 저장합니다
this.mousedown = function () {// 드래그 포인트를 누릅니다
bar.setCapture (); // 크롤링을 설정합니다
offx = parseint (event.clientx) -sparseint (window.style.left);
Offy = parseint (event.clienty) -perseint (swooind.style.top);
ismousedown = true;
if (window.style.zindex <= zindex) {
Zindex ++;
window.style.zindex = zindex;
}
}
this.mouseMove = function () {// 창을 드래그합니다
if (ismousedown &&! maximum) {
bar.style.cursor = 'move'
window.style.left = event.clientx-offx;
window.style.top = event.clienty-offy;
if (window.style.zindex <= zindex) {
Zindex ++;
window.style.zindex = zindex;
}
}
}
this.mouseup = function () {// 버튼을 해제합니다
bar.releasecapture (); // 크롤링 취소
bar.style.cursor = '핸드';
if (parseint (window.style.top) <0) {
window.style.top = '0px';
}
if (parseint (window.style.left) <0) {
window.style.left = '0px';
}
ismousedown = 거짓;
}
this.dblClick = function () {// 두 번 클릭하여 최소화하십시오
if (! maximum) {
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'; // 제목 길이를 설정합니다
resire.style.display = 'none';
if (change.innerText == '-') {
Window.style.height = '100%';
content.style.height = document.body.clientHeight-20; // 웹 페이지의 보이는 영역 너비 - 제목 높이
}또 다른{
window.style.height = '20px';
}
최대 = true;
}또 다른{
Window.style.left = Oldleft;
Window.style.top = OldTop;
window.style.width = width+'px';
title.style.width = (width-40)+'px';
resire.style.display = '';
if (change.innerText == '-') {
window.style.height = height+'px';
content.style.height = parseint (높이 -20)+'px';
}또 다른{
window.style.height = '20px';
}
최대 = 거짓;
}
if (window.style.zindex <= zindex) {
Zindex ++;
window.style.zindex = zindex;
}
}
this.changewindow = function () {// 창을 수축시킵니다
event.cancelbubble = true;
if (change.innerText == '-') {
window.style.height = '20px';
change.innertext = '□';
content.style.display = 'none';
resire.style.display = 'none';
}또 다른{
if (최대) {
Window.style.height = '100%';
content.style.display = '';
resire.style.display = '';
content.style.height = document.body.clientHeight-20; // 웹 페이지의 보이는 영역 너비 - 제목 높이
}또 다른{
window.style.height = height+'px';
content.style.display = '';
resire.style.display = '';
content.style.height = parseint (높이 -20)+'px';
}
change.innerText = '-';
}
}
var window = document.createelement ( "div");
window.id = "divwindow"+ 이름;
window.className = "divwindow";
window.style.left = left+'px';
window.style.top = top+'px';
window.style.width = width+'px';
window.style.height = height+'px';
Window.onClick = function () {
if (parseint (window.style.zindex) <= 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 (바);
var title = document.createelement ( "span");
title.id = "Divtitle"+ 이름;
Title.ClassName = "Divtitle";
title.style.width = (width-40)+'px'; // 적응 형 제목 길이
Title.InnerText = Title;
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 = 'none';
}
close.classname = "divclose";
close.innerText = "×";
Bar.appendChild (Close);
var content = document.createelement ( "div");
content.id = "divcontent"+ 이름;
content.classname = "divcontent"
content.innerhtml = content;
content.style.height = parseint (높이 -20)+'px';
Window.AppendChild (콘텐츠);
var resize = document.createElement ( "div");
resire.classname = "divresize";
reside.onmousedown = function () {
if (window.style.zindex <= zindex) {
Zindex ++;
window.style.zindex = zindex;
}
resine.setCapture ();
ismousedown = true;
}
resire.onmouseMove = function () {
if (ismousedown &&! maximum)
{
너비 = parseint (event.clientx) -perseint (window.style.left) +5;
height = parseint (event.clienty) -perseint (window.style.top) +5;
if (너비> 100) {// 최소 너비를 설정합니다
window.style.width = width+'px';
title.style.width = (width-40)+'px';
}
if (높이> 100) {// 최소 높이를 설정합니다
window.style.height = height+'px';
content.style.height = parseint (높이 -20)+'px';
}
}
}
resine.onmouseup = function () {
resine.releasecapture ();
ismousedown = 거짓;
}
Window.appendChild (크기 조정);
var iframe = document.createElement ( "iframe"); // iframe을 추가하고 IE6.0에서 <select> 컨트롤을 차단하십시오
iframe.classname = "diviframe";
Window.appendChild (iframe);
document.body.appendChild (창);
}
</스크립트>
<body>
<cript>
// 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 창 1 창 1 창 1 창 1 창 1 창 1 창 1 창 1 창 1 창 1 창 1 창 1 창 1 창 1 창 1 창 1 창 1 창 1 창 1 창 1 창 1
objwin1 = 새로운 드래그 캐스트 ( 'win1', 'drag window 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 창 2 창 2 창 2 창 2 창 2 창 2 창 2 창 2 창 2 창 2";
objwin2 = 새로운 드래그 캐스트 ( 'win2', 'drag window 2', c2,350,150,300,300);
var objwin3;
함수 OpenWin () {
if (objwin3 == null) {
var c3="123 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 window 3 windows 3 windows 3 windows 3 windows 3 windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Wind 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Wind 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Wind Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Wind Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Wind Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Wind Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Wind Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Wind Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Wind Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Wind 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Wind 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Wind 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Wind 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Wind
objwin3 = 새로운 드래그 캐스트 ( 'win3', c3, c3,700,150,300,300);
}또 다른{
if (objwin3.window.style.display == 'none') {
objwin3.window.style.display = '';
}
}
}
</스크립트>
<input type = "button"value = "팝업 [Window 3]"onclick = "OpenWin ()" />
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.