快捷導(dǎo)航

新鮮出爐的js tips提示效果

更新時間：2011年04月03日 01:34:39 作者：

提示不難做，那個三角號樣式很難調(diào)兼容，死了好多腦細胞預(yù)覽主窗口提示錯位，保存本地測比較好。

兼容性已經(jīng)測過：IE6\IE7\IE8\FF3\CHROME10

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

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<body> 
<br><br><br><br><br><br><br><br> 
<input id='test'> 

<br><br><br><br><br><br><br><br> 
<a href='#' id='test2' onmouseover="tips.show('普通鏈接或按鈕提示-灰色-鼠標離開消失-300像素', 'test2', null, '#000000', 300)" onmouseout="tips.hidden('test2')">普通鏈接或按鈕提示</a> 

<script> 
//提示消息類 
var tips = { 
temp : {}, 
/*** 
* 彈出提示 
* 
* @param string msg 提示文字內(nèi)容 
* @param string id 要彈出提示的目標對象的id,如果id錯誤/null/false/0則主窗口彈出 
* @param int time 定時消失時間毫秒數(shù),如果為null/0/false則不定時 
* @param string color 提示內(nèi)容的背景顏色格式為#000000 
* @param int width 提示窗寬度,默認300 
*/ 
show : function(msg, id, time, color, width) 
{ 
var target = this._get(id); 
if(!target) { id = 'window'; } 

//如果彈出過則移除重新彈出 
if(this._get(id+'_tips')) { this.remove(id); } 

//設(shè)置默認值 
msg = msg || 'error'; 
color = color || '#ea0000'; 
width = width || 300; 
time = time ? parseInt(time) : false; 

if(id=='window') { 
var y = document.body.clientHeight/2+document.body.scrollTop; 
var x = (document.body.clientWidth-width)/2; 
var textAlign = 'center', fontSize = '15',fontWeight = 'bold'; 
} else { 
//獲取對象坐標信息 
for(var y=0,x=0; target!=null; y+=target.offsetTop, x+=target.offsetLeft, target=target.offsetParent); 
var textAlign = 'left', fontSize = '12',fontWeight = 'normal'; 
} 

//彈出提示 
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);}}); 
document.body.appendChild(tipsDiv); 
tipsDiv.style.top = (y-tipsDiv.offsetHeight-12)+'px'; 
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'})); 
if(id!='window') { 
var arrow = this._create({display:'block',position:'absolute',overflow:'hidden',zIndex:'999',width:'20px',height:'10px',left:(x+20)+'px',top:(y-13)+'px'}, {id:id+'_arrow'}); 
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'})); 
document.body.appendChild(arrow); 
} 

//標記已經(jīng)彈出 
this.temp[id] = id; 

//如果定時關(guān)閉 
if(time) { setTimeout(function(){tips.hidden(id);}, time) } 

return id; 
}, 
/*** 
* 隱藏提示 
* 
* @param string id 要隱藏提示的id,如果要隱藏主窗口提示id為window,如果要隱藏所有提示id為空即可 
*/ 
hidden : function(id) 
{ 
if(!id) { for(var i in this.temp) { this.hidden(i); } return; } 
var t = this._get(id+'_text'), d = this._get(id+'_bg'), a = this._get(id+'_arrow'); 
if(t) { t.parentNode.removeChild(t); } 
if(d) { d.parentNode.removeChild(d); } 
if(a) { a.parentNode.removeChild(a); } 
}, 
_create : function(set, attr) 
{ 
var obj = document.createElement('div'); 
for(var i in set) { obj.style[i] = set[i]; } 
for(var i in attr) { obj[i] = attr[i]; } 
return obj; 
}, 
_get : function(id) 
{ 
return document.getElementById(id); 
} 
}; 


window.onload = function(){ 
tips.show('主窗口提示-綠色-不定時-300像素', null, null, '#009900', 300); 
tips.show('表單報錯提示-紅色-3000毫秒消失-250像素', 'test', 3000, '#ea0000', 250); 
} 
document.onclick = function(){ 
tips.hidden(); 
} 
</script>