`
webcode
  • 浏览: 5929673 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

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

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

代码如下:

/*
message:要显示的消息
x,y:显示消息框的坐标,默认为左上角
delay:延迟多长时间消失,-1为永不消失,单位为毫秒
*/
functionfeedBackMessage(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;
varfdDiv=document.getElementById('show_feedBack_message');
if(!fdDiv){
varshowMessage=document.createElement("<divid='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="";
vardocWidth=document.documentElement.scrollWidth>document.documentElement.clientWidth?document.documentElement.scrollWidth:document.documentElement.clientWidth;
vardocHeight=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;

//渐隐效果
varstep=parseInt(delay/100);
varalpha=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
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics