javascript右下角弹层及自动隐藏

在编写项目中总会需要有个右下角弹层提示公告的需求，怎么用更简单方面，更简洁代码，实现更好用户体验这个就是我们的所要做的内容。可自定义需要标题与内容、弹层显示的宽高、动画效果、显示时间以及相应的事件即可简单的实现在页面的右下角弹出提示层显示内容，并在时间内自动关闭右下角提示层。市场这块弹层很多，但功能不尽如人意。下面分享早些时候自己编写，以及现在还在应用的自动弹层。

弹层示例图：

实现代码如下：

Css样式：

/*通知提示层*/
.msg_info{ font-size: 12px; text-align: left; z-index: 100; position: absolute; display: none; bottom: 0; right: 0; overflow: hidden;}
.msg_info h3{float: left;margin: 0px;height: 0px;width: 100%; color: #fff; height: 30px;}
.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);}
.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;}
.msg_info h3 b{ background-position: 0px 0px;}
.msg_info h3 em{ background-position: 0px -32px;}
.msg_info h3 span{background-position: 0px -64px;float: left;line-height: 30px;}
.msg_info h3 span font{float: left;text-align: left;overflow: hidden; margin-left: 12px;}
.msg_info h3 span i{ float: right; margin-right: 10px; cursor: pointer;font-style:normal;}
.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;}
.message_content div{ float: left; margin: 0px; padding: 10px 14px;height: 100%;position:relative;}
.message_content div p.message_txt{ float: left;width: 100%;height: 80%;margin: 0px; padding: 0px;min-height:60px;}
.message_content div i{float: left; font-style: normal; margin-top: 2px;text-align:right;position:fixed;bottom:2px;right:4px;}
.message_content b.bright{ float: right; width: 1px; font-size: 1px;background-color: #C2C2C2; border-right: solid 1px #828282;height: 100%;}
.msg_info small{float: left; width: 100%; height: 5px; font-size: 5px;}
.msg_info small span{ background-position: 0px -101px;height: 5px; float: left;}
.msg_info small b{height: 5px; background-position: 0px -96px;}
.msg_info small em{ height: 5px; background-position: 0px -106px; float: right;}

Js部分：

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

//右下角弹层
function Messager() {
    this.layer = { 'width': 200, 'height': 100 };
    this.title = '信息提示';
    this.time = 4000;
    this.anims = { 'type': 'slide', 'speed': 600 };
    this.timer1 = null;
    this.isTiming = false;
    this.obj_id = "msg_" + $(document.body).find('msg_info').length;

    var _obj, _title, _anims, _time;
    _timer2 = null;
    //初始化
    this.inits = function (title, text) {
        _anims = this.anims;
        _title = title;
        var _html = '<div class="msg_info ' + this.obj_id + '">';
        _html += '  <h3>';
        _html += '      <b></b>';
        _html += '      <span class="msg_bg_middle">';
        _html += '          <font>' + title + '</font>';
        _html += '          <i class="message_close">×</i>';
        _html += '      </span>';
        _html += '      <em></em>';
        _html += '  </h3>';
        _html += '  <div class="message_content">';
        _html += '      <div class="msg_txt">' + text + '</div>';
        _html += '      <b class="bright"></b>';
        _html += '  </div>';
        _html += '  <small><b></b><span class="msg_bg_middle"></span><em></em></small>';
        _html += '</div>';
        $(document.body).prepend(_html);

        _obj = $("." + this.obj_id);
        if ($.browser.msie) {
            _obj.css('bottom', -5);
        }
        _obj.css('width', this.layer.width);
        _obj.find('.msg_bg_middle').css('width', this.layer.width - 12);
        _obj.find('.message_content').css('width', this.layer.width - 2);
        _obj.find('.msg_txt').css('width', this.layer.width - 34);
        _obj.find(".message_close").click(function () {
            setTimeout(function () { closeMsg(); }, 1);
        });
        _obj.hover(function () {
            clearTimeout(timer1);
            clearInterval(_timer2);
            _timer2 = timer1 = null;
        }, function () {
            timer1 = setTimeout(function () { closeMsg(); }, _time * 1000);
            timing(_time * 1000);
        });
    };
    //显示
    this.show = function (title, text, time) {
        if (title == 0 || !title) title = this.title;
        this.inits(title, text);
        if (time >= 0) this.time = time;

        switch (this.anims.type) {
            case 'slide': _obj.slideDown(this.anims.speed); break;
            case 'fade': _obj.fadeIn(this.anims.speed); break;
            case 'show': _obj.show(this.anims.speed); break;
            default: _obj.slideDown(this.anims.speed); break;
        }
        this.rmmessage(this.time);
    };
    //设置宽高
    this.lays = function (width, height) {
        if (width != 0 && width) this.layer.width = width;
        if (height != 0 && height) this.layer.height = height;
    };
    //呈现属性
    this.anim = function (type, speed) {
        if (type != 0 && type) this.anims.type = type;
        if (speed != 0 && speed) {
            switch (speed) {
                case 'slow': ; break;
                case 'fast': this.anims.speed = 200; break;
                case 'normal': this.anims.speed = 400; break;
                default: this.anims.speed = speed; break;
            }
        }
    };
    //移除层时间
    this.rmmessage = function (time) {
        if (time > 0) {
            timer1 = setTimeout(function () { closeMsg(); }, time);
            if (this.isTiming) {
                timing(time);
            }
        }
    };
    //计时
    timing = function (time) {
        _time = time / 1000;
        _timer2 = setInterval(function () {
            _obj.find('.msg_bg_middle').find('font').html(_title + ' [' + (--_time) + '秒后自动关闭]');
        }, 1000);
    }
    //关闭层
    closeMsg = function () {
        switch (_anims.type) {
            case 'slide': _obj.slideUp(_anims.speed); break;
            case 'fade': _obj.fadeOut(_anims.speed); break;
            case 'show': _obj.hide(_anims.speed); break;
            default: _obj.slideUp(_anims.speed); break;
        }
        setTimeout(function () { _obj.remove(); }, _anims.speed);
    }
}

示例函数：

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

以下为示例教程：

Messager()

Contents

Messager()
1. layer
2. title
3. time
4. anims
5. timer1
6. obj_id
7. show(title, text, time)
8. inits(title,text)
9. lays(width,height)

layer

宽高

title

标题

time

关闭时间

anims

动画效果

timer1

控制退出定时

obj_id

id值

show(title, text, time)

在右下角弹出层，显示信息与内容。

参数:

title：标题
text：内容
time：时间

示例:

var message = new Messager();
message.title = '信息提示';
message.time = 4000;
message.anims = { 'type': 'slide', 'speed': 600 };
message.show();

展示效果:

inits(title,text)

初始化，绑定弹层信息的标题与内容。

参数:

title：标题
text：内容

示例:

var message = new Messager();
message.title = '信息提示';
message.time = 4000;
message.anims = { 'type': 'slide', 'speed': 600 };
message.inits("信息提示","内容");
message.show();

展示效果:

lays(width,height)

设置宽高，可以自定义弹出层的宽与高。

参数:

width:宽
height:高

示例:

var message = new Messager();
message.title = '信息提示';
message.time = 4000;
message.anims = { 'type': 'slide', 'speed': 600 };
message.inits("信息提示", "内容");
message.lays(100, 100);
message.show();

展示效果:

下载地址：

js右下角弹层

http://www.tiaoceng.com/assemblydetail_28.html

新浪微博地址：

http://weibo.com/zhengdjin

posted @ 2016-06-16 09:36 跳层阅读(225) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部