zoukankan      html  css  js  c++  java
  • 类似gmail/163的消息反馈组件

    很简单实用的一个功能,类似Gmail和163邮箱删除邮件时在右上角显示的消息框,今天需要于是就封装了一下发布出来,支持htm文本内容,显示位置的定义和是否自动消失或多长时间渐隐消失。

    代码如下:
    /*
     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
  • 相关阅读:
    基于Centos 搭建Jenkins环境
    基于 CentOS 7 搭建 GitLab
    SpringBoot2.x集成WebSocket
    使用jackson序列化json时遇到的坑
    红米3 Flyme5.1.9.5插桩适配长期不定时更新
    教你一招:使用最快速的方式激活windows10专业版
    ubuntu/mint 安装google的拼音输入法
    Ubuntu 14.04.4官方默认更新源sources.list
    Ubuntu(基于Ubuntu)中常用的apt和dpkt命令
    Linux--目录结构解释(转)
  • 原文地址:https://www.cnblogs.com/MaxIE/p/937002.html
Copyright © 2011-2022 走看看