html css js は XP ウィンドウインターフェイスと関連関数を実装します

ホームページ

ウェブフロントエンド

jsチュートリアル

html css js は XP ウィンドウインターフェイスと関連関数を実装します_javascript スキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:39 PM

xp インターフェース

注: このプログラムは IE でデバッグされています。他のブラウザにはバグがある可能性があります。申し訳ありません。

コードをコピーコードは次のとおりです:

Insert title here

<script> alert("XP Window以IE测试,其他浏览器可能有BUG请见谅! 基本功能+四边四角顶部拖拉都已实现!") alert("进行操作前,记得先初始化窗口哦!"); /* * create xp window and initialize */ var myW = new MyWindow(); function initialize() { myW.setBackgroundDiv("mywindow"); myW.setLeftDiv("mywindow_left"); myW.setRightDiv("mywindow_right"); myW.setBottomDiv("mywindow_bottom"); myW.setTopDiv("mywindow_top"); myW.initialEvent(); } /* * list button event function */ function hiddenWindow() { myW.hidden(); } function showWindow() { myW.show(); } function setAdjust(adj) { myW.setAdjust(adj); } function showMaxSize() { myW.showMaxSize(); } function getTop() { myW.getTop(); } function getLeft() { myW.getLeft(); } function getWidth() { myW.getWidth(); } function getHeight() { myW.getHeight(); } function removeWindow() { myW.removeWindow(); } function addObject() { myW.addObject(); } function deleteObject() { myW.deleteObject(); } /* * drag operation event function */ function start(idName) { myW.start(idName); } function move(idName) { myW.move(idName); } function end(idName) { myW.end(idName); } </script>

初始化窗口

隐藏窗口

显示窗口

设置窗口可调整大小

设置窗口不可调整大小

最大化窗口

在窗口中添加对象

删除对象

得到Top的值

得到Left的值

得到Width的值

得到Height的值

释放窗口资源

onmousemove="move('mywindow_botton_right_corner');"
onmouseup="end('mywindow_botton_right_corner');">

onmouseup="end('mywindow_right');">

onmouseup="end('mywindow_left')";>

onmouseup="end('mywindow_top');">

onmouseup="end('mywindow_right_corner');">

onmouseup="end('mywindow_left_corner');">

onmouseup="end('mywindow_rBottom_corner');">

onmouseup="end('mywindow_top_drag');">

onmouseup="end('mywindow_bottom_drag');">

复制代代码如下:

复制代码代码如下:

 
function MyWindow() { 
/* 背景左下右下上 div */ 
var bgDiv = null; 
var leftDiv = null; 
var rightDiv = null; 
varbottomDiv = null; 
var topDiv = null; 

/* ウィンドウの古い値 */ 
var oldTop = 100; 
var oldLeft = 200; 
var oldWidth = 500; 
var oldHeight = 400; 
var clickTopDivX = null; 
var clickTopDivY = null; 

/* 最大サイズかどうかを記録します */ 
var maxSize = false; 
/* 調整するかどうかを記録します */ 
varAdjust = true; 
/* ウィンドウ内でクリックしたかどうかを記録します */ 
var clickInWindow = false; 
/* レコード追加オブジェクト */ 
var addObj = null; 
/* マウスがダウンしているかどうかを記録します*/ 
var down = 0; 

/* 
* ウィンドウの 5 つの div を設定します 
*/ 
this.setBackgroundDiv = function(idName) { 
bgDiv = document.getElementById(idName); 
}; 
this.setLeftDiv = function(idName) { 
leftDiv = document.getElementById(idName); 
}; 

this.setRightDiv = function(idName) { 
rightDiv = document.getElementById(idName); 
}; 

this.setBottomDiv = function(idName) { 
bottomDiv = document.getElementById(idName); 
} 

this.setTopDiv = function(idName) { 
topDiv = document.getElementById(idName); 
} 

/* ウィンドウのサイズを変更するかどうかを設定します */ 
this.setAdjust = function(Boolean) { 
adjust = Boolean; 
} 

/* ウィンドウ div のイベントを初期化します */ 
this.initialEvent = function() { 
document.onclick = judgeClick; 

var close = document.getElementById("top_close_button"); 
close.onmouseover = closeMouseOver; 
close.onmouseout = closeMouseOut; 
close.onmousedown = closeMouseDown; 
close.onclick = this.removeWindow; 


var max = document.getElementById("top_max_button"); 
max.onmouseover = maxMouseOver; 
max.onmouseout = maxMouseOut; 
max.onmousedown = maxMouseDown; 
max.onclick = showNormalOrMax; 

var min = document.getElementById("top_min_button"); 
min.onmouseover = minMouseOver; 
min.onmouseout = minMouseOut; 
min.onmousedown = minMouseDown; 
min.onclick = hiddenWindow; 
} 

/* 隠しウィンドウ */ 
this.hidden = function() { 
bgDiv.style.display="none"; 
}; 

/* ウィンドウを表示 */ 
this.show = function() { 
bgDiv.style.display=""; 
}; 

/* 
* オブジェクトをウィンドウに追加し、削除します 
*/ 
this.addObject = function(){ 
if (addObj == null) { 
 addObj = document.createElement("p"); 
addObj.innerHTML = "公鸡中の战斗机、OYE! 你太有才了!"; 
document.getElementById("central").appendChild(addObj); 
} 
} 

this.deleteObject = function() { 
addObj.parentNode.removeChild(addObj); 
addObj = null; 
} 

/* 
* ウィンドウ サイズ変更関数 
* curTop curLeft: 新しい左上隅の座標 
* curRight curBottom: 新しい右下隅の座標 
* curWidth curHeight : 新しい幅と高さ 
* ブール値: 新しいデータを記録するかどうか 
*/ 
function changeWindowSize(curTop, curLeft, curWidth, curHeight, Boolean) { 
bgDiv.style.top = curTop; 
bgDiv.style.left = curLeft; 
bgDiv.style.width = curWidth; 
bgDiv.style.height = curHeight; 

/* 新しいデータを記録します */ 
if (Boolean) { 
oldTop = curTop; 
oldLeft = curLeft; 
oldWidth = curWidth; 
oldHeight = curHeight; 
} 
bottomDiv.style.top = curHeight - 26; 
var bDivRCorner = document.getElementById("mywindow_botton_right_corner"); 
bDivRCorner.style.left = curWidth - 12; 

var tDivMiddleButtom = document.getElementById("mywindow_top_middle"); 
tDivMiddleButtom.style.left = curWidth - 72; 

var tDivRightCorner = document.getElementById("mywindow_top_right_corner"); 
tDivRightCorner.style.left = curWidth - 2; 
} 

/* assign idName の画像を変更 */ 
function changeImage(idName, imgSrc) { 
var image = document.getElementById(idName); 
image.src = imgSrc; 
} 

/* ウィンドウの最大サイズを表示 */ 
this.showMaxSize = function() { 
if (調整) { 
maxSize = true; 

changeImage("top_max_button", "image/window_control_resile_normall.bmp"); 

var maxWidth = screen.availWidth; 
var maxHeight = screen.availHeight; 
changeWindowSize(0, 0, maxWidth, maxHeight, false); 
} 
} 

/* ウィンドウを削除 */ 
this.removeWindow = function() { 
if (bgDiv != null) 
bgDiv.parentNode.removeChild( bgDiv); 
} 

/* 
* ウィンドウの上、左、幅、高さの値を取得 
*/ 
this.getTop = function() { 
alert("Myウィンドウの最上位ピクセルは次のとおりです: " bgDiv.offsetTop); 
} 

this.getLeft = function() { 
alert("ウィンドウの左側のピクセルは次のとおりです: " bgDiv.offsetLeft); 
} 

this.getWidth = function() { 
alert("ウィンドウの幅ピクセルは次のとおりです: " bgDiv.offsetWidth); 
} 

this.getHeight = function() { 
alert("ウィンドウの高さのピクセルは次のとおりです: " bgDiv.offsetHeight); 
}
/* 
* マウスの位置を取得 
* return [x, y]: マウスの x および y 座標 
*/ 
function getMouseXY() { 
var x = イベント。ページ X || (event.clientX 
 (document.documentElement.scrollLeft 
|| document.body.scrollLeft 
) 
); 

var y= イベント.pageY || (event.clientY 
 (document.documentElement.scrollTop 
|| document.body.scrollTop 
) 
); 

return [x, y]; 
} 

/* 
* マウスのクリックがウィンドウ内であるかどうかを判断します 
* つまり、ウィンドウが生きているかどうかを判断します 
*/ 
function subjectClick() { 
/* マウスクリックサイトを取得 */ 
var coor = getMouseXY(); 

/* ウィンドウ内かどうかを判断します */ 
var myW = document.getElementById("mywindow"); 
var closeImage = document.getElementById("top_close_button"); 
var maxImage = document.getElementById("top_max_button"); 
var minImage = document.getElementById("top_min_button"); 

if (coor[0] >= myW.offsetLeft && coor[0] <= (myW.offsetLeft myW.offsetWidth) 
&& coor[1] >= myW.offsetTop && coor [1] <= (myW.offsetHeight myW.offsetTop)) { 
clickInWindow = true; 

closeImage.src = "image/window_control_close_normall.bmp"; 

if(maxSize == true) { 
maxImage.src = "image/window_control_resile_normall.bmp"; 
} else { 
maxImage.src = "image/window_control_max_normall.bmp"; 
} 

minImage.src = "image/window_control_min_normall.bmp"; 

} else { 
clickInWindow = false; 

closeImage.src = "image/window_control_close_blur.bmp"; 

if(maxSize == true) { 
maxImage.src = "image/window_control_resile_blur.bmp"; 
} else { 
maxImage.src = "image/window_control_max_blur.bmp"; 
} 

minImage.src = "image/window_control_min_blur.bmp"; 
} 
} 

/* 
* トップボタンイベント関数 
* マウスダウン、マウス移動、マウスアップ、マウス移動があります 
*/ 
関数closeMouseDown() { 
changeImage("top_close_button", "image/window_control_close_mousedown.bmp"); 
} 

function closeMouseOver() { 
if(clickInWindow == true) { 
changeImage("top_close_button", "image/window_control_close_mouseon.bmp"); 
} else { 
changeImage("top_close_button", "image/window_control_close_blur.bmp"); 
} 
} 

function closeMouseOut() { 
if(clickInWindow == true) { 
changeImage("top_close_button", "image/window_control_close_normall.bmp"); 
} else { 
changeImage("top_close_button", "image/window_control_close_blur.bmp"); 
} 
} 

function maxMouseDown(){ 
if (maxSize == true) { 
changeImage("top_max_button", "image/window_control_resile_mousedown.bmp"); 
} 
else { 
changeImage("top_max_button", "image/window_control_max_mousedown.bmp"); 
} 
} 

function maxMouseOver() { 
if (clickInWindow == true) { 
if (maxSize == true) { 
changeImage("top_max_button", "image/window_control_resile_mouseon.bmp"); 
} 
else { 
changeImage("top_max_button", "image/window_control_max_mouseon.bmp"); 
} 
} 
else { 
if (maxSize == true) { 
changeImage("top_max_button", "image/window_control_resile_blur.bmp"); 
} 
else { 
changeImage("top_max_button", "image/window_control_max_blur.bmp"); 
} 
} 
} 

function maxMouseOut() { 
if(clickInWindow == true) { 
if (maxSize == true) { 
changeImage( "top_max_button"、"image/window_control_resile_normall.bmp"); 
} else { 
changeImage("top_max_button", "image/window_control_max_normall.bmp"); 
} 
} else { 
if (maxSize == true) { 
changeImage("top_max_button", "image/window_control_resile_blur.bmp"); 
} else { 
changeImage("top_max_button", "image/window_control_max_blur.bmp"); 
} 
} 
} 

/* 最大マウス クリック イベント関数 */ 
function showNormalOrMax(){ 
if (maxSize &&Adjust) { 
maxSize =間違い; 
changeWindowSize(oldTop, oldLeft, oldWidth, oldHeight, true); 
} else { 
showMaxSize(); 
} 
} 

function minMouseDown() { 
changeImage("top_min_button", "image/window_control_min_mousedown.bmp"); 
} 

function minMouseOver() { 
if(clickInWindow == true) { 
changeImage("top_min_button", "image/window_control_min_mouseon.bmp"); 
} else { 
changeImage("top_min_button", "image/window_control_min_blur.bmp"); 
} 
} 

function minMouseOut() { 
if(clickInWindow == true) { 
changeImage("top_min_button", "image/window_control_min_normall.bmp"); 
} else { 
changeImage("top_min_button", "image/window_control_min_blur.bmp"); 
} 
} 

/* 
* ドラッグイベント function 
*/ 
this.start = function(idName) { 
if(idName == "mywindow_top ") { 
var coor = getMouseXY(); 
clickTopDivX = coor[0]; 
clickTopDivY = coor[1]; 
} 
document.getElementById(idName).setCapture(); 
下 = 1; 
}

this.move = function(idName) { 
var curTop = oldTop; 
var curLeft = oldLeft; 
var curWidth = oldWidth; 
var curHeight = oldHeight; 
var coor = getMouseXY(); 

if (向下 && 調整 && !maxSize) { 
if(idName == "mywindow_rBottom_corner") { 
curLeft = coor[0]; 
curWidth = oldLeft - curLeft; 
curHeight = coor[1] - oldTop; 
if(curWidth curLeft = oldLeft oldWidth - 80; 
} 
} else if(idName == "mywindow_left_corner") { 
curTop = coor[1]; 
curLeft = coor[0]; 
curWidth = oldLeft - curLeft; 
curHeight = oldTop - curTop; 
if(curHeight curTop = oldTop oldHeight - 40; 
} 
if(curWidth curLeft = oldLeft oldWidth - 80; 
} 
} else if(idName == "mywindow_right_corner") { 
curTop = coor[1]; 
curWidth = coor[0] - curLeft; 
curHeight = oldHeight oldTop - curTop; 
if(curHeight curTop = oldTop oldHeight - 40; 
} 
} else if(idName == "mywindow_top") { 
curTop = curTop coor[1] - clickTopDivY; 
curLeft = curLeft coor[0] - clickTopDivX; 
clickTopDivX = coor[0]; 
clickTopDivY = coor[1]; 
} else if(idName == "mywindow_right") { 
curWidth = coor[0] - oldLeft; 
} else if(idName == "mywindow_left") { 
curLeft = coor[0]; 
curWidth = oldLeft - curLeft; 
if(curWidth curLeft = oldLeft oldWidth - 80; 
} 
} else if(idName == "mywindow_top_drag") { 
curTop = coor[1]; 
curHeight = oldTop - curTop; 
if(curHeight curTop = oldTop oldHeight - 40; 
} 
} else if(idName == "mywindow_bottom_drag"){ 
curHeight = coor[1] - oldTop; 
} else { 
//拖曳視窗右角 
curWidth = coor[0] - oldLeft; 
curHeight = coor[1] - oldTop; 
} 
if(curWidth curWidth = 80; 
} 

if(curHeight curHeight = 40; 
} 

changeWindowSize(curTop, curLeft, curWidth, curHeight, true); 
} 
} 

this.end = function(idName) { 
down = 0; 
document.getElementById(idName).releaseCapture(); 
} 
} 

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7328

Java チュートリアル

1626

CakePHP チュートリアル

1350

Laravel チュートリアル

1262

PHP チュートリアル

1209

Related knowledge

Python のヒントでは、Gui を使用しなくてもグラフィカルインターフェイスを実装できます Apr 12, 2023 pm 04:43 PM

プログラマが恐れていることがあるとすれば、それはニーズが再び変化したことかもしれません! いいえ、作者がブラウザベースの Web アプリケーションを開発した後、顧客はこう言いました: プログラムは内部 (いいえ) 内部のものである必要があります。 (ネットワーク) ) 環境... これは、Python 環境をインストールできないことを意味します! プログラマと呼ばれるのは誰ですか? GUI 版を開発すればいいのではありませんか? それは私にとって問題ではありません... しかし、与えられた時間を聞いた後、落ち着かなかった... ...お客様の評価に影響を与えないために、1週間しか猶予がありません! GUIを考えるのは難しくありませんが、サービスと対話型インターフェイスを整理する必要があります。そうでない場合は、GUI 用に別のインターフェイスを作成する必要がありますが、明らかに時間が足りません。いいえ、別の方法を考えましょう...それ以外の場合は、Web を使用するだけです

Win10 および XP 共有フォルダーソリューション Jan 27, 2024 pm 02:33 PM

Windows XP および Windows 10 システムでは、フォルダーの共有はそれほど複雑なタスクではなく、この記事で説明する詳細な手順に従うだけで簡単に完了できます。 win10 ホームバージョンとの間でフォルダーを共有する手順 1。 3.「権限」を入力し、「追加」をクリックし、「ユーザーまたはグループ」選択時に追加するユーザー名を入力します。 4. フルコントロールや読み取り専用など、対応するアクセス許可を設定します。 5. 次に、設定を保存してフォルダーを閉じます。ステップ 2: win10 コンピューターを構成する 1. リソースマネージャーを開きます。

BIOS 設定を変更して Win7 に XP システムをインストールする方法 Jan 05, 2024 am 08:42 AM

私たちが win7 オペレーティングシステムを使用していたとき、一部の友人は、必要に応じてシステムを XP オペレーティングシステムに変更したいと考えていました。このプロセス中にいくつかの問題に遭遇した友人もいるかもしれません。 Windows 7 から XP システムの BIOS を設定する方法について、編集者は、まずショートカットキーを使用してコンピューターの BIOS に入り、次に関連するオプションを見つけて、編集者の指示に従って設定する必要があると考えています。具体的な手順を見てみましょう~ win7 で BIOS を XP システムに設定する方法 1. ThinkPad および Lenovo VBKEM シリーズノートブックの BIOS に入るには、キーボードの F1 キーを押します (一部のモデルでは、キーボードの組み合わせキー Fn を押します)。 +F1 を押し、Fn キーを押します（押したまま F1 キーを繰り返し押します）。 2.「再起動」アイコンを選択します

ワードインターフェースが小さくなったらどうすればいいですか？ Mar 20, 2024 pm 09:30 PM

コンピューターを使用して Word 文書を編集する場合、どこをタッチしたのか分からなくなり、インターフェースが突然非常に小さくなり、Word 文書内の文字がはっきりと見えなくなることがあります。このような問題が発生すると、コンピューターが故障しているのではないかとパニックになる人もいるかもしれませんが、実際には、特定の設定に遭遇してディスプレイを調整しただけです。では、誤ってインターフェイスの表示サイズを変更してしまった場合、どのように元に戻して調整すればよいのでしょうか?ワードインターフェースが小さくなったらどうすればいいですか？以下にいくつかの解決方法を紹介しますので、そんな問題に遭遇したときに簡単に対処していただければ幸いです。まず、Word 文書を作成して開き、簡単な編集操作を実行して手順を示します。下の写真では

先代機皇は再び戦えるのか？ Samsung Galaxy S23 Ultraの実践的な体験の共有 Mar 12, 2024 pm 01:58 PM

スマートフォン市場では、サムスンのGalaxyシリーズがその優れた性能と革新的なデザインで常に注目を集めています。 Galaxy S23 Ultraは前世代機の王者として、発売以来消費者に愛されてきました。時が経つにつれ、次々と新しいモデルが登場する中、かつてのマシン王は今でも戦えるのでしょうか？次に、私が実際に Samsung Galaxy S23 Ultra を使用した経験を共有し、この問題について皆さんと議論したいと思います。まず、外観デザインの観点から見ると、Galaxy S23 UltraはSamsungの一貫した洗練さとハイエンドを維持しています。そのユニークなわずかに湾曲した画面デザインは、電話機全体の美しさを高めるだけでなく、ユーザーにより没入型の視覚体験をもたらします。日常的に使用する

2人の中国のGoogle研究者が初の純粋に視覚的な「モバイルUI理解」モデルを発表、SOTAを刷新する4つの主要なタスク Apr 12, 2023 pm 04:40 PM

AIにとって「携帯電話で遊ぶ」ということは簡単なことではなく、さまざまなユーザーインターフェース（UI）を識別するだけでも大きな問題であり、各コンポーネントの種類を識別するだけでなく、使用されている記号、位置を識別して機能を決定する必要がありますコンポーネントの。モバイルデバイスの UI を理解すると、UI の自動化など、人間とコンピューターのさまざまな対話タスクを実現するのに役立ちます。モバイル UI モデリングに関するこれまでの研究は通常、画面のビュー階層情報に依存し、UI の構造データを直接利用することで、画面ピクセルから始まるコンポーネントの識別の問題を回避していました。ただし、ビュー階層はすべてのシナリオで使用できるわけではありません。通常、この方法では、オブジェクトの説明が欠落していたり、構造情報が間違っているため、誤った結果が出力されます。

Python インターフェースに入るにはどうすればよいですか?ダウンロードが完了したらどうすればよいですか? Apr 04, 2024 am 11:06 AM

Python インターフェイスに入るには、次の手順に従います。 Python インタープリターをダウンロードしてインストールします。 Windows では、スタートメニューで「Python (コマンドライン)」を見つけてクリックします。macOS では、ターミナルに python3 と入力します。Linux では、ターミナルに python3 と入力します。

VSCodeの中国語インターフェース設定が失敗する原因を詳しく解説 Mar 25, 2024 pm 05:15 PM

Visual Studio Code (VSCode) を使用した開発プロセスでは、中国語インターフェイスの設定の問題が発生することがあります。インストールプロセス中に中国語のインターフェースが選択されているにもかかわらず、実際の使用中には英語のインターフェースが表示されたままであることが判明するため、この状況はユーザーを混乱させる可能性があります。次に、この問題の考えられる原因を詳細に調査し、この問題を解決するための具体的なコード例を示します。まず、VSCode 中国語インターフェイス設定が失敗する主な理由の 1 つは、ソフトウェアにある可能性があります。

See all articles

html css js は XP ウィンドウ インターフェイスと関連関数を実装します_javascript スキル