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 jQuery $.post $.ajax用法
Jul 09 Javascript
简介JavaScript中strike()方法的使用
Jun 08 Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 Javascript
jQuery前端开发35个小技巧
May 24 Javascript
实例解析jQuery中proxy()函数的用法
May 24 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
vue.js学习之递归组件
Dec 13 Javascript
AngularJS constant和value区别详解
Feb 28 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 24 Javascript
vue 解决IOS10低版本白屏的问题
Nov 17 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
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
PHP的error_reporting错误级别变量对照表
2014/07/08 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
精心挑选的15个jQuery下拉菜单制作教程
2012/06/15 Javascript
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
一个js过滤空格的小函数
2014/10/10 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
JavaScript模块化开发之SeaJS
2015/12/13 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
详解HTTPS 的原理和 NodeJS 的实现
2017/07/04 NodeJs
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
JavaScript贪吃蛇小组件实例代码
2017/08/20 Javascript
浅谈webpack4 图片处理汇总
2018/09/12 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
python访问纯真IP数据库的代码
2011/05/19 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
纯CSS绘制漂亮的圆形图案效果
2014/05/07 HTML / CSS
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
《在山的那边》教学反思
2014/02/23 职场文书
校庆接待方案
2014/03/18 职场文书
英文请假条
2014/04/11 职场文书
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
爱心捐款活动总结
2015/05/09 职场文书
村主任当选感言
2015/08/01 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python