갓 구운 js 팁 프롬프트 effect_javascript 기술

호환성 테스트 완료 : IE6IE7IE8FF3CHROME10

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

a href ='#' id='test2' onmouseover="tips.show('일반 링크 또는 버튼 팁 - 회색 - 마우스가 떠날 때 사라짐 - 300픽셀', 'test2', null, '#000000', 300) " onmouseout="tips.hidden('test2')">일반 링크 또는 버튼 프롬프트

<script> <br>//프롬프트 메시지 클래스<BR>var Tips = { <BR>temp : {}, <BR>/*** <BR>* 팝업 프롬프트<BR>* <BR>* @param string msg 프롬프트 텍스트 내용<BR>* @param string id 프롬프트를 팝업할 대상 개체의 ID입니다. ID가 잘못된 경우/ null/false/0, 메인 윈도우 팝업<BR>* @param int time 예정된 소멸 시간(밀리초) null/0/false인 경우 예정되지 않습니다.<BR>* @param string color 프롬프트 내용의 배경색 형식은 #000000 <BR>* @param int width 프롬프트 창 너비, 기본값 300 <BR>*/ <BR>show : function(msg, id, time, color, width) <BR>{ <BR>var target = this._get(id ); <BR>if(!target) { id = 'window' } <BR><br>//팝업이 뜨면 제거하고 다시 팝업하세요<br>if(this._get(id ' _tips')) { this.remove (id) } <BR><br>//기본값 설정 <br>msg = msg || 'error' <BR>color = color || <BR>너비 = 너비 || 300 ; <BR>time ?parseInt(time) : false <BR><br>if(id=='window') { <br>var y = document.body. clientHeight/2 document.body.scrollTop; <BR>var x = (document.body.clientWidth-width)/2; <BR>var textAlign = 'center',fontSize = '15',fontWeight = 'bold'; 🎜>} else { <BR>/ /객체 좌표 정보 가져오기<BR>for(var y=0,x=0; target!=null; y =target.offsetTop, x =target.offsetLeft, target=target.offsetParent ); <BR>var textAlign = 'left',fontSize = '12',fontWeight = 'normal'; <BR>} <BR><BR>//팝업 프롬프트<br>var TipsDiv = this._create( {display:'block',position:'absolute',zIndex:'1001',width:(width-2) 'px',left:(x 1) 'px',padding:'5px',color:'# ffffff',fontSize:fontSize 'px', backgroundColor :color,textAlign:textAlign,fontWeight:fontWeight,filter:'Alpha(Opacity=50)',opacity:'0.7'}, {id:id '_text', innerHTML: msg, onclick:function(){tips.hidden (id);}}); <br>document.body.appendChild(tipsDiv) <BR>tipsDiv.style.top = (y-tipsDiv.offsetHeight-12) ' px'; <BR>document.body.appendChild (this._create({display:'block',position:'absolute',zIndex:'1000',width:(width 10) 'px',height:(tipsDiv. offsetHeight-2) 'px',left:x 'px',top:(y-tipsDiv.offsetHeight-11) 'px', backgroundColor:color,filter:'Alpha(Opacity=50)',opacity:'0.7' }, {id:id '_bg'}) ); <BR>if(id!='window') { <BR>var arrow = this._create({display:'block',position:'absolute',overflow :'숨김',zIndex:'999', 너비:'20px', 높이:'10px', 왼쪽:(x 20) 'px',top:(y-13) 'px'}, {id:id ' _arrow'}); <BR>arrow.appendChild (this._create({display:'block',overflow:'hidden',width:'0px',height:'10px',borderTop:'10px solid ' color,borderRight :'10px solid #fff', borderLeft:' 10px solid #fff',filter:'Alpha(Opacity=70)',opacity:'0.8'})) <BR>document.body.appendChild(arrow); 🎜>} <BR><BR>// 마크가 떴습니다<BR>this.temp[id] = id <br><br>//타이머가 꺼진 경우<BR>if(time) { setTimeout(function(){tips.hidden(id);}, time ) } <br><br>return id <BR>}, <br>/*** <br>* 프롬프트 숨기기 <BR>* <BR>* @param string id 숨길 프롬프트의 ID입니다. 기본 창을 숨기려는 경우 프롬프트 ID는 모든 프롬프트를 숨기려는 경우입니다. , ID는 비워둘 수 있습니다 <BR>*/ <BR>hidden: function( id) <BR>{ <BR>if(!id) { for (var i in this.temp) { this.hidden(i) } return } <BR>var t = this._get(id '_text' ), d = this._get(id '_bg'), a = this._get(id '_arrow') <BR>if(t) { t.parentNode.removeChild(t) } <BR>if(d ) { d.parentNode.removeChild(d); } <BR>if (a) { a.parentNode.removeChild(a) } <BR>}, <BR>_create : function(set, attr) <BR>{ <BR>var obj = document.createElement('div'); <BR>for(var i in set) { obj.style[i] = set[i] } <BR>for(var i in attr) obj[i] = attr[i]; } <BR>return obj ; <BR>}, <BR>_get : function(id) <BR>{ <BR>return document.getElementById(id) <BR>} <BR>}; <BR><BR><BR>window.onload = function(){ <br>tips.show('메인 창 팁-녹색-불규칙-300픽셀', null, null, '#009900' , 300); <br>tips.show('양식 오류 팁 - 빨간색 - 3000밀리초 안에 사라짐 - 250픽셀', 'test', 3000, '#ea0000', 250) <BR>} <BR>document. onclick = function(){ <BR>tips.hidden(); <BR></script>