类似GMAIL的Ajax信息反馈显示

148 阅读 0 评论 98 点赞

我是靠谱客的博主眯眯眼摩托，最近开发中收集的这篇文章主要介绍类似GMAIL的Ajax信息反馈显示，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> 
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>new document</TITLE> 
<META http-equiv=Content-Type content="text/html; charset=gb2312"> 
<META content="MSHTML 6.00.2900.2180" name=GENERATOR> 
<META content="" name=author> 
<META content="" name=keywords> 
<META content="" name=description> 
<STYLE type=text/css>#show_feedBack_message { 
BORDER-RIGHT: #f00 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #f00 1px solid; PADDING-LEFT: 3px; FONT-SIZE: 12px; BACKGROUND: #fc0; PADDING-BOTTOM: 3px; BORDER-LEFT: #f00 1px solid; LINE-HEIGHT: 18px; PADDING-TOP: 3px; BORDER-BOTTOM: #f00 1px solid 
} 
{ 
FONT-SIZE: 12px 
} 
OL LI { 
MARGIN: 15px 0px 
} 
OL LI A { 
FONT-SIZE: 14px; COLOR: #00f 
} 
</STYLE> 
</HEAD> 
<BODY> 
<SCRIPT type=text/javascript> 
<!-- 
/* 
message:要显示的消息 
x,y:显示消息框的坐标,默认为左上角 
delay:延迟多长时间消失，-1为永不消失，单位为毫秒 
*/ 
function feedBackMessage(message,x,y,delay){ 
if(!message) return; 
//只允许百分数或数值参数 
x=/d{1,2}%|100%|left|right/.test(x)?x:(parseInt(x)||0)+"px"; 
y=/d{1,2}%|100%|top|bottom/.test(y)?y:(parseInt(y)||0)+"px"; 
delay=parseInt(delay)||-1; 
var fdDiv=document.getElementById('show_feedBack_message'); 
if(!fdDiv){ 
var showMessage=document.createElement("<div id='show_feedBack_message' style='z-index:10000;filter:alpha(opacity=100);position:absolute;white-space:nowrap'></div>"); 
document.body.appendChild(showMessage); 
fdDiv=document.getElementById('show_feedBack_message'); 
} 

if(feedBackMessage.timer){clearInterval(feedBackMessage.timer)} 
fdDiv.innerHTML=message; 
fdDiv.style.display=""; 
var docWidth=document.documentElement.scrollWidth>document.documentElement.clientWidth?document.documentElement.scrollWidth:document.documentElement.clientWidth; 
var docHeight=document.documentElement.scrollHeight>document.documentElement.clientHeight?document.documentElement.scrollHeight:document.documentElement.clientHeight; 
if(/left|right/.test(x)){ 
x=(x=="left")?"0px":(docWidth-fdDiv.offsetWidth)+"px"; 
} 
if(/top|bottom/.test(y)){ 
y=(y=="top")?"0px":(docHeight-fdDiv.offsetHeight)+"px"; 
} 
fdDiv.style.left=x; 
fdDiv.style.top=y; 
fdDiv.filters.Alpha.Opacity=100; 

//渐隐效果 
var step=parseInt(delay/100); 
var alpha=fdDiv.filters.Alpha.Opacity; 
if(delay!=-1){ 
feedBackMessage.timer=setInterval(function(){ 
if(fdDiv.filters.Alpha.Opacity>0){ 
fdDiv.filters.Alpha.Opacity-- 
}else{ 
clearInterval(feedBackMessage.timer); 
fdDiv.style.display="none" 
} 
},step); 
} 
} 
//--> 
</SCRIPT> 

<DIV style="TEXT-ALIGN: center"> 
<DIV style="MARGIN: 15px auto; WIDTH: 96%; TEXT-ALIGN: left"> 
<OL> 
<LI>(默认设置)显示位置：左上角 消失时间：不消失<BR><BR><A 
onclick="feedBackMessage('消息提示测试1......');return false" 
href="#">feedBackMessage('消息提示测试......')</A> 

<LI>显示位置：left:200px,top:200px 消失时间：5秒后<BR><BR><A 
onclick="feedBackMessage('消息提示测试1......','200','200',5000);return false" 
href="#">feedBackMessage('消息提示测试1......','200','200',5000)</A> 

<LI>显示位置：页面右上部 消失时间：3秒后<BR><BR><A 
onclick="feedBackMessage('消息提示测试2......','right','top',3000);return false" 
href="#">feedBackMessage('消息提示测试2......','right','top',3000)</A> 

<LI>显示位置：left:50%,top:50% 消失时间：2秒后<BR><BR><A 
onclick="feedBackMessage('消息提示测试3......','50%','50%',2000);return false" 
href="#">feedBackMessage('消息提示测试3......','50%','50%',2000)</A> 
<LI>显示位置：left:500px,top:200px 消失时间：不消失<BR><BR><A 
onclick="feedBackMessage('消息提示测试4......','500','200',-1);return false" 
href="#">feedBackMessage('消息提示测试4......','500','200',-1)</A> </LI></OL></DIV> 
<DIV 
style="FONT-SIZE: 14px; MARGIN: 15px auto; WIDTH: 96%; LINE-HEIGHT: 20px; TEXT-ALIGN: left">函数语法：feedBackMessage(Message,X,Y,Delay) 
<BR><BR><STRONG>参数介绍：</STRONG> <BR><U>Message：</U>必填参数。该参数为要显示的消息内容，可以为html内容 
<BR><U>X：</U>水平方向的位置，可以是数值如50，250等，也可以是百分比如50%，或者是以下两个参数：left(信息框左侧紧邻页面左侧),right(信息框右侧紧邻页面右侧)。默认为left。 
<BR><U>Y：</U>垂直方向的位置，可以是数值，也可以是百分比，或者是以下两个参数：top(信息框顶部紧邻页面顶部),bottom(信息框底部紧邻页面底部)。默认为top。 
<BR><U>Delay：</U>显示时间，即多长时间后消失，单位为毫秒，如5000即5秒后消失，设定为-1则永不消失。默认为-1 
</DIV></DIV> 
</BODY> 
</HTML> 