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

마우스가 지나갈 때 나타나는 프롬프트 효과는 제목보다 더 아름답고 사용자 정의가 가능합니다.
JS:

코드 복사 코드는 다음과 같습니다.

//-- --- -----------------------툴팁 효과 시작--------- ---- ----------
//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:




코드 복사

코드는 다음과 같습니다.

#tipPanel{ background:white ; 패딩:6px 8px; 테두리: 솔리드 4px #09c; 글꼴 크기:14px; 색상:#555;} #tipPanel p{ margin:0px;} #tipPanel b{ 색상: 빨간색; 글꼴 크기:14px;}

HTML 호출:

코드 복사


코드는 다음과 같습니다.

< ;script type="text/ javascript"> //툴팁 컨트롤 초기화

:


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