javascript tips提示框組件實(shí)現(xiàn)代碼

2019-11-21 00:07:06

字體：大中小

供稿：網(wǎng)友

tip.js

 
function tips(obj,tag){ 
var tip = document.createElement('div'),arg= arguments[2],left,top; //創(chuàng)建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;i<len;i++){ 
hover(abs[i],function(){ 
var content = arg||this.getAttribute('tip'),text; 
left = position(this).left,top=position(this).top; 
content?tip.innerHTML=content:tip.innerHTML="暫無(wú)內(nèi)容！"; 
if(left+parseInt(getStyle(tip,'width'))>bodywid) //判斷當(dāng)前位置是否超過(guò)最大寬度 
text='right:'+(bodywid-left)+'px;left:auto;'; 
else 
text='left:'+(left+this.offsetWidth)+'px;'; 
text +='top:'+(top+this.offsetHeight)+'px;'; 
tip.style.cssText=text; 
text=''; 
tip.style.display='block'; 
},function(){ 
tip.style.display='none'; 
}); 
} 
} 
function hover(el,fnOver, fnOut){//鼠標(biāo)滑過(guò)函數(shù) 
addEvent(el,'mouseover',fnOver); 
addEvent(el,'mouseout',fnOut); 
} 
function addEvent(el,type,fn){ //綁定事件 
if(el.attachEvent) { 
el['e'+type+fn] = fn; //IE下拷貝元素引用,使this指向el對(duì)象而不是window 
el[type+fn] = function(){el['e'+type+fn](window.event);} 
el.attachEvent('on'+type, el[type+fn]); 
}else 
el.addEventListener(type, fn, false); 
} 
function position(el){//dom節(jié)點(diǎn)的絕對(duì)位置 
if(el&&el.nodeType == 1) 
return {'left':el.getBoundingClientRect().left+document.documentElement.scrollLeft,'top':el.getBoundingClientRect().top+document.documentElement.scrollTop}; 
} 
function getStyle(obj,styleName){//獲取當(dāng)前樣式屬性 
if(obj.currentStyle)//ie 
return obj.currentStyle[styleName]; 
else{ //ff 
var $arr=obj.ownerDocument.defaultView.getComputedStyle(obj, null); 
return $arr[styleName]; 
} 
} 
tips(document.getElementById('tips'),'a'); 

一個(gè)簡(jiǎn)單的類(lèi)似title的提示效果，但現(xiàn)實(shí)內(nèi)容可以很豐富，以上js另存為tip.js，下面是使用的demo。

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
<meta name="copyright" content="" /> 
<meta name="keywords" content="" /> 
<meta name="description" content="" /> 
<title>提示信息框</title> 
<link rel="stylesheet" type="text/css" href="style/css/tip.css" /> 
<style> 
#wrap{line-height:22px;padding:20px;} 
#tips .tip_bd{border:1px solid green;width:100px;position:absolute;background:#fff;z-index:9999;text-align:center;display:none;} 
#tips{border:1px solid #ccc;padding:0 10px;} 
</style> 
</head> 

<body> 
<h1>提示信息框</h1> 
<br/><br/><br/><br/> 
<div id="tips"> 
閱讀了<a href="#" tip="武林網(wǎng)">武林網(wǎng)</a>今天發(fā)布的IT文章《30個(gè)提高Web程序執(zhí)行效率的好經(jīng)驗(yàn)》，這30條準(zhǔn)則對(duì)我們web開(kāi)發(fā)是非常有用的，不則是知其然而不知其所<a href="#" tip="武林網(wǎng)2">武林網(wǎng)</a>以然。下面是我對(duì)這些準(zhǔn)則的理解和分析，有些有關(guān)JS性能的準(zhǔn)則，我也測(cè)試了它們<a href="#">武林網(wǎng)</a>的差異，大家可以下載DEMO頁(yè)面，如有理解不正確的地方，請(qǐng)大家指教。 
</div> 
</body> 
<script type="text/javascript" src="tips.js"></script> 
</html> 