新鲜出炉的js tips提示效果_javascript技巧

兼容性已经测过：IE6\IE7\IE8\FF3\CHROME10

复制代码 代码如下:

普通链接或按钮提示

<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 || '#ea0000'; <BR>width = width || 300; <BR>time = 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'; <BR>} 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:'hidden',zIndex:'999',width:'20px',height:'10px',left:(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>//标记已经弹出 <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为window,如果要隐藏所有提示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>} <BR></script>