类似Gmail和163邮箱删除邮件时在右上角显示的消息框

显示位置的定义和是否自动消失或多长时间渐隐消失。

代码如下:

/*
 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);
 }
}


函数语法:feedBackMessage(Message,X,Y,Delay) 

参数介绍: 
Message:必填参数。该参数为要显示的消息内容,可以为html内容 
X:水平方向的位置,可以是数值如50,250等,也可以是百分比如50%,或者是以下两个参数:left(信息框左侧紧邻页面左侧),right(信息框右侧紧邻页面右侧)。默认为left。 
Y:垂直方向的位置,可以是数值,也可以是百分比,或者是以下两个参数:top(信息框顶部紧邻页面顶部),bottom(信息框底部紧邻页面底部)。默认为top。 
Delay:显示时间,即多长时间后消失,单位为毫秒,如5000即5秒后消失,设定为-1则永不消失。默认为-1
原文地址:https://www.cnblogs.com/zerogo/p/2209262.html