javascript右下角彈層及自動(dòng)隱藏(自己編寫)
更新時(shí)間:2013年11月20日 15:18:51 作者:
需要有個(gè)右下角彈層提示公告的,下面分享早些時(shí)候自己編寫,以及現(xiàn)在還在應(yīng)用的自動(dòng)彈層,需要的朋友可以參考下
在編寫項(xiàng)目中總會(huì)需要有個(gè)右下角彈層提示公告的需求,怎么用更簡(jiǎn)單方面,更簡(jiǎn)潔代碼,實(shí)現(xiàn)更好用戶體驗(yàn)這個(gè)就是我們的所要做的內(nèi)容。市場(chǎng)這塊彈層很多,但功能不盡如人意。下面分享早些時(shí)候自己編寫,以及現(xiàn)在還在應(yīng)用的自動(dòng)彈層。
彈層示例圖:
實(shí)現(xiàn)代碼如下:
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部分:
自定義右下角彈層函數(shù)
//右下角彈層
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);
};
//設(shè)置寬高
this.lays = function (width, height) {
if (width != 0 && width) this.layer.width = width;
if (height != 0 && height) this.layer.height = height;
};
//呈現(xiàn)屬性
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;
}
}
};
//移除層時(shí)間
this.rmmessage = function (time) {
if (time > 0) {
timer1 = setTimeout(function () { closeMsg(); }, time);
if (this.isTiming) {
timing(time);
}
}
};
//計(jì)時(shí)
timing = function (time) {
_time = time / 1000;
_timer2 = setInterval(function () {
_obj.find('.msg_bg_middle').find('font').html(_title + ' [' + (--_time) + '秒后自動(dòng)關(guān)閉]');
}, 1000);
}
//關(guān)閉層
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);
}
}
示例函數(shù):
var msg = '<p class="message_txt">當(dāng)前有' + json.total + '個(gè)待審核用戶等待您審核。</p><i>' + json.stadate + '</i>';
var msgDiv = new Messager();
msgDiv.isTiming = true;
msgDiv.lays(300, 180);
msgDiv.show("用戶審核提醒", msg, 10000);
彈層示例圖:

實(shí)現(xiàn)代碼如下:
Css樣式:
復(fù)制代碼 代碼如下:
/*通知提示層*/
.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部分:
自定義右下角彈層函數(shù)
復(fù)制代碼 代碼如下:
//右下角彈層
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);
};
//設(shè)置寬高
this.lays = function (width, height) {
if (width != 0 && width) this.layer.width = width;
if (height != 0 && height) this.layer.height = height;
};
//呈現(xiàn)屬性
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;
}
}
};
//移除層時(shí)間
this.rmmessage = function (time) {
if (time > 0) {
timer1 = setTimeout(function () { closeMsg(); }, time);
if (this.isTiming) {
timing(time);
}
}
};
//計(jì)時(shí)
timing = function (time) {
_time = time / 1000;
_timer2 = setInterval(function () {
_obj.find('.msg_bg_middle').find('font').html(_title + ' [' + (--_time) + '秒后自動(dòng)關(guān)閉]');
}, 1000);
}
//關(guān)閉層
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);
}
}
示例函數(shù):
復(fù)制代碼 代碼如下:
var msg = '<p class="message_txt">當(dāng)前有' + json.total + '個(gè)待審核用戶等待您審核。</p><i>' + json.stadate + '</i>';
var msgDiv = new Messager();
msgDiv.isTiming = true;
msgDiv.lays(300, 180);
msgDiv.show("用戶審核提醒", msg, 10000);
您可能感興趣的文章:
- Bootstrap被封裝的彈層
- jQuery彈層插件jquery.fancybox.js用法實(shí)例
- 小巧強(qiáng)大的jquery layer彈窗彈層插件
- Angularjs整合微信UI(weui)
- Js 訂制自己的AlertBox(信息提示框)
- javascript中常見的3種信息提示框(alert,prompt,confirm)
- JS實(shí)現(xiàn)仿google、百度搜索框輸入信息智能提示的實(shí)現(xiàn)方法
- js操作輸入框提示信息且響應(yīng)鼠標(biāo)事件
- js下在password表單內(nèi)顯示提示信息的解決辦法
- weUI應(yīng)用之JS常用信息提示彈層的封裝
相關(guān)文章
基于Jquery實(shí)現(xiàn)焦點(diǎn)圖淡出淡入效果
這篇文章主要介紹了基于Jquery實(shí)現(xiàn)焦點(diǎn)圖淡出淡入效果,需要的朋友可以參考下2015-11-11jquery PrintArea 實(shí)現(xiàn)票據(jù)的套打功能(代碼)
下面小編就為大家?guī)硪黄猨query PrintArea 實(shí)現(xiàn)票據(jù)的套打功能(代碼)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03JQuery 控制內(nèi)容長(zhǎng)度超出規(guī)定長(zhǎng)度顯示省略號(hào)
這篇文章主要介紹JQuery如何實(shí)現(xiàn)控制內(nèi)容長(zhǎng)度超出規(guī)定長(zhǎng)度顯示省略號(hào),需要的朋友可以參考下2014-05-05jQuery基礎(chǔ)_入門必看知識(shí)點(diǎn)
下面小編就為大家?guī)硪黄猨Query基礎(chǔ)_入門必看知識(shí)點(diǎn)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07詳解jquery插件jquery.viewport.js學(xué)習(xí)使用方法
本篇文章主要介紹了詳解jquery插件jquery.viewport.js學(xué)習(xí)使用方法,具有一定的參考價(jià)值,有興趣的可以了解一下2017-09-09