zoukankan      html  css  js  c++  java
  • 类似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
  • 相关阅读:
    10.19NOIP模拟赛(DAY2)
    bzoj1880: [Sdoi2009]Elaxia的路线(spfa,拓扑排序最长路)
    P3469 [POI2008]BLO-Blockade(Tarjan 割点)
    P2746 [USACO5.3]校园网Network of Schools(Tarjan)
    10.17NOIP模拟赛
    10.16NOIP模拟赛
    P3953 逛公园(dp,最短路)
    牛客OI周赛2-提高组
    洛谷 P1948 [USACO08JAN]电话线Telephone Lines 题解
    洛谷 P2563 [AHOI2001]质数和分解 题解
  • 原文地址:https://www.cnblogs.com/zerogo/p/2209262.html
Copyright © 2011-2022 走看看