javascript右下角弹层及自动隐藏

在编写项目中总会需要有个右下角弹层提示公告的需求，怎么用更简单方面，更简洁代码，实现更好用户体验这个就是我们的所要做的内容。市场这块弹层很多，但功能不尽如人意。下面分享早些时候自己编写，以及现在还在应用的自动弹层。

弹层示例图：

 

实现代码如下：

Css样式：

  1. /*通知提示层*/  
  2. .msg_info{ font-size: 12px; text-align: left; z-index: 100; position: absolute; display: none; bottom: 0; right: 0; overflow: hidden;}  
  3. .msg_info h3{float: left;margin: 0px;height: 0px;width: 100%; color: #fff; height: 30px;}  
  4. .msg_info h3 span, .msg_info h3 b, .msg_info h3 em, .msg_info small span, .msg_info small b, .msg_info small em{ background-image: url(/img/msg_bg.png);}  
  5. .msg_info h3 b, .msg_info h3 em, .msg_info small b, .msg_info small em{ float: left;font-size: 1px; width: 6px; height: 30px;}  
  6. .msg_info h3 b{ background-position: 0px 0px;}  
  7. .msg_info h3 em{ background-position: 0px -32px;}  
  8. .msg_info h3 span{background-position: 0px -64px;float: left;line-height: 30px;}  
  9. .msg_info h3 span font{float: left;text-align: left;overflow: hidden; margin-left: 12px;}  
  10. .msg_info h3 span i{ float: right; margin-right: 10px; cursor: pointer;font-style:normal;}  
  11. .message_content{ float: left;color: #515F62;overflow: hidden;border-left: solid 1px #C2C2C2; background-color: #F1F2F7; margin-top: -1px; min-height: 145px; height: auto !important; height: 145px;}  
  12. .message_content div{ float: left; margin: 0px; padding: 10px 14px;height: 100%;position:relative;}  
  13. .message_content div p.message_txt{ float: left;width: 100%;height: 80%;margin: 0px; padding: 0px;min-height:60px;}  
  14. .message_content div i{float: left; font-style: normal; margin-top: 2px;text-align:right;position:fixed;bottom:2px;right:4px;}  
  15. .message_content b.bright{ float: right; width: 1px; font-size: 1px;background-color: #C2C2C2; border-right: solid 1px #828282;height: 100%;}  
  16. .msg_info small{float: left; width: 100%; height: 5px; font-size: 5px;}  
  17. .msg_info small span{ background-position: 0px -101px;height: 5px; float: left;}  
  18. .msg_info small b{height: 5px; background-position: 0px -96px;}  
  19. .msg_info small em{ height: 5px; background-position: 0px -106px; float: right;}  


Js部分：

 

1。自定义右下角弹层函数

 
  1. //右下角弹层  
  2. function Messager() {  
  3.     this.layer = { 'width': 200, 'height': 100 };  
  4.     this.title = '信息提示';  
  5.     this.time = 4000;  
  6.     this.anims = { 'type': 'slide', 'speed': 600 };  
  7.     this.timer1 = null;  
  8.     this.isTiming = false;  
  9.     this.obj_id = "msg_" + $(document.body).find('msg_info').length;  
  10.   
  11.     var _obj, _title, _anims, _time;  
  12.     _timer2 = null;  
  13.     //初始化  
  14.     this.inits = function (title, text) {  
  15.         _anims = this.anims;  
  16.         _title = title;  
  17.         var _html = '<div class="msg_info ' + this.obj_id + '">';  
  18.         _html += '  <h3>';  
  19.         _html += '      <b></b>';  
  20.         _html += '      <span class="msg_bg_middle">';  
  21.         _html += '          <font>' + title + '</font>';  
  22.         _html += '          <i class="message_close">×</i>';  
  23.         _html += '      </span>';  
  24.         _html += '      <em></em>';  
  25.         _html += '  </h3>';  
  26.         _html += '  <div class="message_content">';  
  27.         _html += '      <div class="msg_txt">' + text + '</div>';  
  28.         _html += '      <b class="bright"></b>';  
  29.         _html += '  </div>';  
  30.         _html += '  <small><b></b><span class="msg_bg_middle"></span><em></em></small>';  
  31.         _html += '</div>';  
  32.         $(document.body).prepend(_html);  
  33.   
  34.         _obj = $("." + this.obj_id);  
  35.         if ($.browser.msie) {  
  36.             _obj.css('bottom', -5);  
  37.         }  
  38.         _obj.css('width', this.layer.width);  
  39.         _obj.find('.msg_bg_middle').css('width', this.layer.width - 12);  
  40.         _obj.find('.message_content').css('width', this.layer.width - 2);  
  41.         _obj.find('.msg_txt').css('width', this.layer.width - 34);  
  42.         _obj.find(".message_close").click(function () {  
  43.             setTimeout(function () { closeMsg(); }, 1);  
  44.         });  
  45.         _obj.hover(function () {  
  46.             clearTimeout(timer1);  
  47.             clearInterval(_timer2);  
  48.             _timer2 = timer1 = null;  
  49.         }, function () {  
  50.             timer1 = setTimeout(function () { closeMsg(); }, _time * 1000);  
  51.             timing(_time * 1000);  
  52.         });  
  53.     };  
  54.     //显示  
  55.     this.show = function (title, text, time) {  
  56.         if (title == 0 || !title) title = this.title;  
  57.         this.inits(title, text);  
  58.         if (time >= 0) this.time = time;  
  59.   
  60.         switch (this.anims.type) {  
  61.             case 'slide': _obj.slideDown(this.anims.speed); break;  
  62.             case 'fade': _obj.fadeIn(this.anims.speed); break;  
  63.             case 'show': _obj.show(this.anims.speed); break;  
  64.             default: _obj.slideDown(this.anims.speed); break;  
  65.         }  
  66.         this.rmmessage(this.time);  
  67.     };  
  68.     //设置宽高  
  69.     this.lays = function (width, height) {  
  70.         if (width != 0 && width) this.layer.width = width;  
  71.         if (height != 0 && height) this.layer.height = height;  
  72.     };  
  73.     //呈现属性  
  74.     this.anim = function (type, speed) {  
  75.         if (type != 0 && type) this.anims.type = type;  
  76.         if (speed != 0 && speed) {  
  77.             switch (speed) {  
  78.                 case 'slow': ; break;  
  79.                 case 'fast': this.anims.speed = 200; break;  
  80.                 case 'normal': this.anims.speed = 400; break;  
  81.                 default: this.anims.speed = speed; break;  
  82.             }  
  83.         }  
  84.     };  
  85.     //移除层时间  
  86.     this.rmmessage = function (time) {  
  87.         if (time > 0) {  
  88.             timer1 = setTimeout(function () { closeMsg(); }, time);  
  89.             if (this.isTiming) {  
  90.                 timing(time);  
  91.             }  
  92.         }  
  93.     };  
  94.     //计时  
  95.     timing = function (time) {  
  96.         _time = time / 1000;  
  97.         _timer2 = setInterval(function () {  
  98.             _obj.find('.msg_bg_middle').find('font').html(_title + ' [' + (--_time) + '秒后自动关闭]');  
  99.         }, 1000);  
  100.     }  
  101.     //关闭层  
  102.     closeMsg = function () {  
  103.         switch (_anims.type) {  
  104.             case 'slide': _obj.slideUp(_anims.speed); break;  
  105.             case 'fade': _obj.fadeOut(_anims.speed); break;  
  106.             case 'show': _obj.hide(_anims.speed); break;  
  107.             default: _obj.slideUp(_anims.speed); break;  
  108.         }  
  109.         setTimeout(function () { _obj.remove(); }, _anims.speed);  
  110.     }  
  111. }  


示例函数：

 
  1. var msg = '<p class="message_txt">当前有' + json.total + '个待审核用户等待您审核。</p><i>' + json.stadate + '</i>';  
  2.                     var msgDiv = new Messager();  
  3.                     msgDiv.isTiming = true;  
  4.                     msgDiv.lays(300, 180);  
  5.                     msgDiv.show("用户审核提醒", msg, 10000);  



posted @ 2013-11-20 11:18  web8  阅读(629)  评论(1)  编辑  收藏  举报