この記事では、JSによってスケーリング、ドラッグ、閉じ、最小化できるフローティングウィンドウを実装する方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
次のようにコードをコピーします。
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<Title> JSは、スケーリング、ドラッグ、閉じ、最小化できる浮動窓を実装しています</title>
</head>
<style type = "text/css">
.divwindow {word-wrap：break-word; position：absolute;オーバーフロー：隠し;}
.divbar {border：000000 1px solid; position：aspolute; border-bottom：＃000000 1px solid; width：100％; height：20px; background-color：＃0099ff; cursor：hand; line-height：20px;}
.divchange {position：aspolute; right：25px; font-size：10pt;}
.divclose {位置：絶対;右：5px; font-size：11pt;}
.divtitle {position：absolute; left：5px; font-size：10pt; white-space：nowrap; text-overflow：ellipsis; -o-text-overflow：ellipsis; overflow：hidden;}
.divcontent {border：＃000000 1px solid; border-top：＃000000 0px solid; position：absolute;上：20px;幅：100％;バックグラウンドカラー：#fffff; Overflow-y：auto;
Scrollbar-Base-Color：#fffff; Scrollbar-Arrow-Color：＃999999; Scrollbar-Face-Color：#eeeee; Scrollbar-Highlight-Color：#eeeee;
scrollbar-shadow-color：#eeeee; scrollbar-3dlight-color：#fffff; scrollbar-track-color：#fffff; scrollbar-darkshadow-color：#cccccc;}
.divresize {height：7px;幅：7px;オーバーフロー：隠し;バックグラウンドカラー：＃0000ff;位置：絶対;下：6px;右：6px;カーソル：nw-resize}
.diviframe {height：100％; width：100％;}
</style>
<スクリプト言語= "javascript">
var zindex = 0 //グローバル変数
関数dragClass（名前、タイトル、コンテンツ、左、上、幅、高さ）{
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）-parseint（window.style.left）;
offy = parseint（event.clienty）-parseint（window.style.top）;
ismousedown = true;
if（window.style.zindex <= zindex）{
Zindex ++;
window.style.zindex = zindex;
}
}
this.mousemove = function（）{//ウィンドウをドラッグします
if（ismousedown &&！maximing）{
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 = 'hand';
if（parseint（window.style.top）<0）{
window.style.top = '0px';
}
if（parseint（window.style.left）<0）{
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; // Webページの可視領域は広いです
title.style.width =（document.body.clientwidth-40）+'px'; //タイトルの長さを設定します
resize.style.display = 'none';
if（change.innertext == ' - '）{
window.style.height = '100％';
content.style.height = document.body.clientheight-20; // Webページの可視領域の幅 - タイトルの高さ
}それ以外{
window.style.height = '20px';
}
最大= true;
}それ以外{
window.style.left = oldleft;
window.style.top = oldtop;
window.style.width = width+'px';
title.style.width =（width-40）+'px';
resize.style.display = '';
if（change.innertext == ' - '）{
window.style.height = height+'px';
content.style.height = parseint（height-20）+'px';
}それ以外{
window.style.height = '20px';
}
最大= false;
}
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';
resize.style.display = 'none';
}それ以外{
if（最大）{
window.style.height = '100％';
content.style.display = '';
resize.style.display = '';
content.style.height = document.body.clientheight-20; // Webページの可視領域の幅 - タイトルの高さ
}それ以外{
window.style.height = 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"+ name;
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 = window;
//クラスの外部で操作できるパブリック属性。クラスの外で動作したい場合は、要素をパブリック属性に変更できます
var bar = document.createelement（ "div"）;
bar.id = "divbar"+name;
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"+ name;
title.classname = "Divtitle";
title.style.width =（width-40）+'px'; //適応タイトルの長さ
title.innertext = title;
bar.AppendChild（タイトル）;
var change = document.createelement（ "span"）;
change.id = "divchange"+ name;
change.classname = "divchange";
change.innertext = " - ";
change.ondblclick = this.changewindow;
change.onclick = this.changewindow;
bar.AppendChild（変更）;
var close = document.createelement（ "span"）;
close.id = "divclose"+ name;
close.onclick = function（）{
window.style.display = 'none';
}
close.classname = "divclose";
close.innertext = "×";
bar.AppendChild（close）;
var content = document.createelement（ "div"）;
content.id = "divcontent"+ name;
content.classname = "divcontent"
content.innerhtml = content;
content.style.height = parseint（height-20）+'px';
window.appendchild（content）;
var resize = document.createelement（ "div"）;
resize.classname = "divresize";
sezize.onmousedown = function（）{
if（window.style.zindex <= zindex）{
Zindex ++;
window.style.zindex = zindex;
}
resize.setcapture（）;
ismousedown = true;
}
resize.onmousemove = function（）{
if（ismousedown &&！maximing）
{
width = parseint（event.clientx）-parseint（window.style.left）+5;
height = parseint（event.clienty）-parseint（window.style.top）+5;
if（width> 100）{//最小幅を設定します
window.style.width = width+'px';
title.style.width =（width-40）+'px';
}
if（height> 100）{//最小高さを設定します
window.style.height = height+'px';
content.style.height = parseint（height-20）+'px';
}
}
}
resize.onmouseup = function（）{
releasecapture（）;
ismousedown = false;
}
window.appendchild（sezize）;
var iframe = document.createelement（ "iframe"）; // iframeを追加し、IE6.0の下で<select>コントロールをブロックします
iframe.classname = "diviframe";
window.appendChild（iframe）;
document.body.appendChild（window）;
}
</script>
<body>
<スクリプト>
// dragclass（id、windowタイトル、コンテンツ、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ウィンドウ
objwin1 = new DragClass（ '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ウィンドウ2ウィンドウ2ウィンドウ2ウィンドウ2ウィンドウ2ウィンドウ2ウィンドウ2
objwin2 = new DragClass（ 'Win2'、 'Drag Window 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 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 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 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 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 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 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 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 window 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 windows 3 window 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 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 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 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 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 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 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 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 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 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 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 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 Window 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Windows 3 Window
objwin3 = new DragClass（ 'Win3'、C3、C3,700,150,300,300）;
}それ以外{
if（objwin3.window.style.display == 'none'）{
objwin3.window.style.display = '';
}
}
}
</script>
<入力型= "button" value = "ポップアップ[ウィンドウ3]" onclick = "openwin（）" />
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。