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 相关文章推荐
菜鸟javascript基础资料整理3 正则
Dec 06 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
jquery提示效果实例分析
Nov 25 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
Nov 19 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 Javascript
基于js实现二级下拉联动
Dec 17 Javascript
原生js实现焦点轮播图效果
Jan 12 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
Sep 13 Javascript
微信小程序使用navigateTo数据传递的实例
Sep 26 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
Mar 01 Javascript
浅析Vue中method与computed的区别
Mar 06 Javascript
详解Node.js一行命令上传本地文件到服务器
Apr 22 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
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
用javascript实现在小方框中浏览大图的代码
2007/08/14 Javascript
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
js is_valid_filename验证文件名的函数
2017/07/19 Javascript
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
2019/06/20 Javascript
vue-cli3 引入 font-awesome的操作
2020/08/11 Javascript
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
python使用win32com库播放mp3文件的方法
2015/05/30 Python
利用Python实现颜色色值转换的小工具
2016/10/27 Python
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
Python subprocess库的使用详解
2018/10/26 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
Overload和Override的区别
2012/09/02 面试题
抗洪救灾标语
2014/10/08 职场文书
群众路线学习笔记范文
2014/11/06 职场文书
优秀班集体申报材料
2014/12/25 职场文书
爱晚亭导游词
2015/02/09 职场文书
护士个人总结范文
2015/02/13 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers
Java实现给Word文件添加文字水印
2022/02/15 Java/Android
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android
netty 实现tomcat的示例代码
2022/06/05 Servers