js プロンプト情報 jtip カプセル化コード (画像またはarticle_javascript スキルにすることができます)

vartipdiv = document.createElement("div");
tipdiv.id = "txbtip";
tipdiv.style.position = "absolute"; 3px";
tipdiv .style.background = "#565656";
tipdiv.style.zIndex = "999";
tipdiv.style.border = "1px ソリッド #000";
tipdiv .style.background = "# F4F8FC";
tipdiv.style.fontsize = "14px";
rootEle.appendChild(tipdiv); >

次に、追加するラベルに onmousemove イベントと onmouseout イベントを追加します。ここでは、より共通性を高めるために、追加するすべてのラベルに共通のクラス名 (txbtip) を付けます。

tag = タグ ||
var classElements = [], allElements = document.getElementsByTagName(tag) ;
for (var i = 0; i
n = "" n "";
var cn = " " allElements[i].className " "; 🎜>if (cn.indexOf(n) != -1) {
classElements[classElements.length] = allElements[i]
}
}
return classElements; 🎜>

注: このメソッドは、クラス n の特定のタグのセットを取得するためのものです。

this.title = "";//ここでこれを行う理由は次のとおりです。元のタイトル プロンプトをクリアします。
tipdiv.innerHTML = title;
setTipPosition(e);//このメソッドは、ヒント ボックスを配置するために使用されます。
}
txbtip[tip].onmousemove = function(e) {
setTipPosition(e);//このメソッドはプロンプト ボックスの配置に使用されます。
}
txbtip[tip].onmouseout = function(e) {
//alert("out");
this.title = temp;
temp = ""; >tipdiv.style.display = "none";
}




最後のステップは、上で説明した setTipPotion メソッドです。実装は次のとおりです。

これでほぼ完成したので、それを反転してページ バインディングと組み合わせることができます。したがって、それを window.onload に書き込みます。

window.onload=function(){...}
ただし、この場合、ページに複数の window.onload イベントがあり、失敗する可能性があるため、いくつかの作業が必要です。完了します。また、先ほどのプロンプトボックスの対応するラベルには既にマウスイベントがある可能性があり、判定を追加する必要があります。

if (window.addEventListener) { window.addEventListener("load", ready, false); } else if (window.attachEvent) { window.attachEvent("onload", ready);以下は完全なコードです。
jstip.js
[code]

//******js テキスト プロンプト txb20100119********/

if (window.addEventListener) {
window . addEventListener("load", 準備完了, false);
} else if (window.attachEvent) {
window.attachEvent("onload", ready);

関数準備完了( ) {
var txbtip = getElementsByClassName('txbtip', '*');
vartipdiv = document.createElement("div");
tipdiv.id = "txbtip"; . style.position = "absolute";
tipdiv.style.padding = "#565656";
tipdiv.style.zIndex = "999"; 🎜 >tipdiv.style.border = "1px ソリッド #000";
tipdiv.style.background = "#F4F8FC";
tipdiv.style.fontsize = "14px"; = "なし";
var rootEle = document.documentElement;|
rootEle.appendChild(tipdiv);
//alert(txbtip)ヒント ].id);
var temp = "";
txbtip[tip].onmouseover = function(e) {
tipdiv.style.display = "ブロック"; . title;
temp = this.title;
tipdiv.innerHTML = title;
setTipPosition(e); 🎜 >}
txbtip[tip].onmousemove = function(e) {
setTipPosition(e);
}
txbtip[tip].onmouseout = function(e) {
//アラート ("アウト");
this.title = temp;
tipdiv.style.display = "none"; >
function getElementsByClassName(n, tag) {
tag = tag || "*";
var classElements = [], allElements = document.getElementsByTagName(tag); 0 ; i < allElements.length; i ) {
n = "" n "";
var cn = " " allElements[i].className " "; ) != -1) {
classElements[classElements.length] = allElements[i]
}
}
return classElements;
関数 setTipPosition(e); 🎜 >e = e || イベント;
tipdiv.style.left = e.clientX 10 'px';
var top = document.body.scrollTop : document.documentElement.scrollTop;
tipdiv.style.top = e.clientY 10 トップ 'px'
}
}
[コード]







独自の js プロンプト情報 jtip をカプセル化する例











これはハイパーリンクです