javascript 팁 프롬프트 상자 구성 요소 구현 code

javascript 팁 프롬프트 상자 구성 요소 구현 code_javascript 팁

WBOY

풀어 주다： 2016-05-16 18:15:59

원래의

1332명이 탐색했습니다.

tip.js

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

 
 functiontips(obj,tag){ 
vartip = document.createElement('div'),arg=args[2],left,top; //tipbox 생성 
var bodywid= document.documentElement.clientWidth; //여기서는 컨테이너의 너비로 대체할 수도 있습니다. $(id).outerWidth(); 
var abs = obj.getElementsByTagName(tag) 
tip.className="tip_bd" 
 obj.appendChild(tip); 
for(var i=0,len=abs.length;ihover(abs[i],function(){ 
var content = arg||this.getAttribute( 'tip'),text; 
left = position(this).left,top=position(this).top 
content?tip.innerHTML=content:tip.innerHTML= "아직 콘텐츠가 없습니다!"; 
if(leftparseInt(getStyle(tip,'width'))>bodywid) //현재 위치가 최대 너비를 초과하는지 확인
text='right:' (bodywid -left) 'px;left:auto ;'; 
else 
text='left:' (왼쪽 this.offsetWidth) 'px;' 
text ='top:' (top this.offsetHeight ) 'px;'; 
tip.style.cssText=text; 
text='' 
tip.style.display='block'; tip.style.display='none' ; 
}); 
} 
} 
function hover(el,fnOver, fnOut){//마우스 오버 기능
addEvent(el,' mouseover',fnOver); 
addEvent(el,'mouseout',fnOut) 
} 
function addEvent(el,type,fn){ //이벤트 바인딩
if(el.attachEvent) { 
el[' e' type fn] = fn; //창이 아닌 el 객체를 가리키도록 IE에서 요소 참조를 복사합니다. 
el[type fn] = function(){el[' e' type fn](window.event) ;} 
el.attachEvent('on' type, el[type fn]) 
}else 
el.addEventListener(type, fn, false); 
} 
함수 위치( el){//dom 노드의 절대 위치
if(el&&el.nodeType == 1) 
return {'left':el.getBoundingClientRect().left document.documentElement.scrollLeft,'top':el.getBoundingClientRect().top document.documentElement.scrollTop}; 
} 
function getStyle(obj,styleName){//현재 스타일 속성 가져오기
if (obj.currentStyle)//ie 
return obj .currentStyle[styleName]; 
else{ //ff 
var $arr=obj.ownerDocument.defaultView.getCompulatedStyle(obj, null) 
 return $arr[styleName]; 
} 
} 
tips(document.getElementById('tips'),'a') 

 
간단한 제목 같은 팁 효과 , 그러나 실제 내용은 매우 풍부할 수 있습니다. 위의 js는tip.js로 저장되며, 다음은 사용된 데모입니다. 

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

>

프롬프트 메시지 상자
< ;link rel="stylesheet" type="text/css" href="style/css/tip.css" />

팁 상자

Script House오늘 발표된 IT 기사 "웹 프로그램 실행 효율성 향상을 위한 30가지 좋은 경험"에서 이 30가지 지침은 우리에게 매우 중요합니다. 웹 개발은 알고 있지만 그것이 무엇인지 모르는 경우에 매우 유용합니다Script Home이것이 바로 그 이유입니다. 다음은 이러한 지침에 대한 나의 이해와 분석입니다.

;