javascript右下角弹层及自动隐藏(自己编写)


Posted in Javascript onNovember 20, 2013

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

弹层示例图:
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部分:

自定义右下角弹层函数

//右下角弹层 
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);
Javascript 相关文章推荐
让回调函数 showResponse 也带上参数的代码
Aug 13 Javascript
ExtJS 2.0实用简明教程之应用ExtJS
Apr 29 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 Javascript
下拉菜单点击实现连接跳转功能的js代码
May 19 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
Jul 04 Javascript
js编写trim()函数及正则表达式的运用
Oct 24 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
May 19 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
Feb 03 Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 Javascript
vue实现模态框的通用写法推荐
Feb 26 Javascript
Vue中jsx不完全应用指南小结
Nov 01 Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 #Javascript
js中的布尔运算符使用介绍
Nov 20 #Javascript
浅析hasOwnProperty方法的应用
Nov 20 #Javascript
鼠标滚轮改变图片大小的示例代码
Nov 20 #Javascript
JS画线(实例代码)
Nov 20 #Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
Nov 20 #Javascript
JS事件在IE与FF中的区别详细解析
Nov 20 #Javascript
You might like
网络资源
2006/10/09 PHP
php生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
thinkphp整合微信支付代码分享
2016/11/24 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
动态刷新 dorado树的js代码
2009/06/12 Javascript
JS获取各种浏览器窗口大小的方法
2014/01/14 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
jQuery中add()方法用法实例
2015/01/08 Javascript
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
12条写出高质量JS代码的方法
2018/01/07 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
Vue 事件处理操作实例详解
2019/03/05 Javascript
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
python、java等哪一门编程语言适合人工智能?
2017/11/13 Python
Tensorflow的可视化工具Tensorboard的初步使用详解
2018/02/11 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
CK美国官网:Calvin Klein
2016/08/26 全球购物
女性时尚在线:IVRose
2019/02/23 全球购物
XML文档定义有几种形式?它们之间有何本质区别?解析XML文档有哪几种方式?
2016/01/12 面试题
销售业务实习自我鉴定
2013/09/23 职场文书
应聘教师推荐信
2013/10/31 职场文书
期末考试动员演讲稿
2014/01/10 职场文书
中学校庆方案
2014/03/17 职场文书
2014年母亲节寄语
2014/05/07 职场文书
洗手间标语
2014/06/23 职场文书
政风行风整改方案
2014/10/25 职场文书
个性发展自我评价2015
2015/03/09 职场文书
2015年女职工工作总结
2015/05/15 职场文书