类似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
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值