この記事では、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プログラミングに役立つことを願っています。