軽量 JS ツールチップ プロンプト効果_JavaScript スキル

マウスが通過したときに表示されるプロンプトエフェクトはタイトルよりも美しく、カスタマイズ可能です。
JS:

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

//-- --- -----------------------ツールチップ効果の開始---------- ---- ----------
//HTML 要素の位置を取得します
function GetPos(obj){
var pos=new Object(); .x=obj .offsetLeft;
pos.y=obj.offsetTop;
while(obj=obj.offsetParent){
pos.x =obj.offsetLeft; offsetTop;
}
return pos;

//ヒントツール
var ToolTip={
_tipPanel:null,
Init:function();
if (null==this._tipPanel){
var tempDiv=document.createElement("div");
document.body.insertBefore(tempDiv, document.body.childNodes[0]); 🎜>tempDiv.id="tipPanel";
tempDiv.style.position="absolute";
tempDiv.style.zIndex="999"; 🎜>}
},
AttachTip:function(){}, // チップ バインディングを追加
DetachTip:function(){}, // チップ バインディングを削除
ShowTip:function(oTarget){
if($("tipPanel")==null)
return;

/*操作プロセス
*1. 新しい HTML フラグメントを構築します
*2。プロンプト ボックスの位置
*3、表示プロンプト ボックス
*/
//1。
var tempStr="" //html フラグメント
if(arguments.length>1){
for(var i=1;itempStr ="

" 引数[i] "
}
}
$("tipPanel").innerHTML=tempStr;
//2.
var pos=GetPos(oTarget);
$("tipPanel").style.left=(oTarget.offsetWidth/ 2 pos .x) "px";
$("tipPanel").style.top=(oTarget.offsetHeight pos.y) "px";
//3. ).style.display="";
},
HideTip:function(){
if($("tipPanel")==null)
$("tipPanel ") .style.display="none";
}
};

//---------------------- -- ---ツールチップ効果終了-----------------------------------


CSS:




コードをコピー

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

#tipPanel{background:white ; パディング:6px 8px; ボーダー:solid 4px; フォントサイズ:#555;} #tipPanel p{ margin:0px;} #tipPanel b{ red; font- size:14px;}

HTML 呼び出し:

コードをコピー

コードは次のとおりです。

;script type="text/ javascript"> //ツールチップ コントロールを初期化します

:


上記の $("id") は document.getElementById("id") と同等です
AttachTip:function(){}, //プロンプト バインディングを追加します
DetachTip: function(){} , //プロンプト バインディング
の 2 行を削除します。これは、プロジェクトでは必要ないため、まだ追加されていません。