PHPウィッシングウォールモジュールの詳細な機能分析_PHPチュートリアル
- WBOYオリジナル
- 2016-07-21 15:03:041931ブラウズ
ウィッシングウォールモジュールの機能分析
1. 最新テクノロジー
1. ウィッシングノートを移動するためのドラッグアンドドロップ DOM テクノロジーの実装
ドラッグ可能な DOM パターンの目的は、閲覧者が独自のページを定義できるようにすることです。ページ内の各要素の位置。マウスを使用して移動したい部分を選択し、新しい位置にドラッグするだけでページをカスタマイズできます。
DOM は Document Object Model の略称で、ブラウザ、プラットフォーム、言語に依存しないインターフェースであり、ユーザーはページの他の標準コンポーネントにアクセスできます。 DOM は、階層構造で編成されたノードまたは情報の集合です。この階層により、開発者はツリー内を移動して特定の情報を探すことができます。この構造を分析するには、通常、作業を行う前にドキュメントの構造階層全体をロードする必要があります。 DOM は情報階層に基づいているため、ツリーベースまたはオブジェクトベースと言われます。
特定の実装では、次の時間がトリガーされます:
(1)moveStart
(2)Move
(3)moveEnd
マウスの左ボタンが押されてマウスが動き始めたとき、ドラッグされたウィッシュ上でbar moveStart イベントがトリガーされます。ユーザーは moveStart イベント ハンドラーを使用して、ドラッグ開始時に JavaScript コードを許可できます。 moveStart イベントがトリガーされると、オブジェクトがドラッグされている限り、常に移動時間がトリガーされます。ドラッグが停止すると、moveEnd イベントがトリガーされます。
echo はウィッシュバースタイルのレイアウトを出力します。コードは次のとおりです:
echo "
「.$face.」' id ='IconImg' style='float:left '＆gt;
＆lt;/span＆gt;
;
"）' '＆gt; " QQ:".$QQ."
/TABLE>
マウスの左ボタンが押されると、マウスの時間 onmousedown を使用して Move() 関数がトリガーされます
コードをコピーします
コードは次のとおりです:
var Layer='';
document.onmouseup=moveEnd;
document.onmousemove=moveStart;
var b;
var c;
function Move(Object,event){ //DIV ウィッシングノートを移動します
Layer=Object . id;
if(document.all){
document.getElementById(Layer).setCapture();
b=event.x-document.getElementById(Layer).style.pixelLeft; // 左の境界線を設定します
c= event.y-document.getElementById(Layer).style.pixelTop; //右の境界線を設定します
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
b=event. layerX; / /本体を基準とした時間オブジェクトの横座標を返します
c=event.layerY //本体を基準とした時間オブジェクトの縦座標を返します
}
/**マウスでノートをクリックすると、ノートは * に配置されます。*/
document .getElementById(Layer).style.zIndex =iLayerMaxNum;
iLayerMaxNum=iLayerMaxNum+1;
/********************************/
}
document.all は、ドキュメント内のすべてのタグで構成される配列変数です。ドキュメント オブジェクト内の要素 この配列はドキュメント内のすべての要素にアクセスできます。
構文:
document.all[i]
document.all[name]
document.all.tags[tagname]
説明:
all[] は、多機能の配列のようなオブジェクトです。ドキュメント内のすべての HTML 要素。 all[] 配列は IE4 から生まれ、他の多くのブラウザーで採用されています
all[] は、Document インターフェースの標準の getElementById() メソッドと getElementByTagName() メソッド、および Document の getElementByName() メソッドに置き換えられました。物体。
all[] には、元の順序を保持する要素が含まれており、配列内の正確な数値位置がわかっている場合は、配列から要素を直接抽出できます。ただし、HTML 属性名または ID に基づいて要素にアクセスするには、all[] 配列を使用する方が一般的です。要素が指定された名前を持つ場合、同じ名前を共有する要素の配列が取得されます。
document.all はブラウザが IE かどうかを判断できます
if(document.all){
alert("is IE!");
}
window.captureEvents ()
window.captureEvents(event1 |event2 |eventN)
captureEvents() メソッドは、発生するすべてのイベント タイプを垂直バーで区切ります。メソッドは次のとおりです。
Event .ABORT
Event.BLUR
Event.CHANGE
Event.CLICK
Event.DBLCLICK
Event.DRAGDROP
Event.ERROR
Event.FOCUS
Event.KEYDOWN
Event.KEYPRESS
Event.KEYUP
event.load
event.Mousedown
event.MouseMove
Event.Mouseout
Event.MouseOver
Event.MouseUp
Event.Move
EVENT.RESET
EVENT.RESIZE
EVENT.EVENT.EVENT.SUBMIT
EVENT.UNLOAD
SAMPERコード:
-
var counter = 0;
window.captureEvents(Event.CLICK)
window.onclick = myClickHandler;
function myClickHandler(){
window.document.myForm.myText.handleEvent;
}
function changeText(){
document .myForm.myText.value = counter++;
}
-->
TEXT size=2 value=" " name="myText" onClick='changeText()'>