경량 JS 도구 설명 프롬프트 effect_javascript 기술

//-- --- -----------------------툴팁 효과 시작--------- ---- ----------
//html 요소의 위치 가져오기
function GetPos(obj){
var pos=new Object()
pos; .x=obj .offsetLeft;
pos.y=obj.offsetTop;
while(obj=obj.offsetParent){
pos.x =obj.offsetLeft; offsetTop;
}
return pos;

//Tip Tool
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.display="none";
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 위치 .x) "px";
$("tipPanel").style.top=(oTarget.offsetHeight pos.y) "px"
//3. ).style.display="";
},
HideTip:function(){
if($("tipPanel")==null)
return; ") .style.display="none";
}
};

//---------------------- -- ---툴팁 효과end----------------------


CSS:




코드 복사

HTML 호출:

:


위 $("id")는 document.getElementById("id")
AttachTip:function(){}, //프롬프트 바인딩 추가
DetachTip: function(){} , //동적 바인딩 이벤트를 사용하여 완료할 수 있는 프롬프트 바인딩
두 줄을 제거합니다. 프로젝트에서는 필요하지 않기 때문에 아직 추가되지 않습니다.