基于jquery实现漂亮的动态信息提示效果


Posted in Javascript onAugust 02, 2011

简单,漂亮,动画效果,用户体验好!
基于jquery实现漂亮的动态信息提示效果

这个效果是在页面头部出现的,出现一下会自动隐藏,上面有x那个提示就要手动关闭一下,其他的都是自动隐藏的!

温馨提示:基于jquery 1.6.2 版本!

<div id="message-dock"> 
<div id="message-sleeve" class="group"> 
<p><span class="sprite message-icon"></span><span id="message-text"></span><a class="dismiss"></a></p> 
</div> 
</div>

调用方式:
<script type="text/javascript" src="sysmsg.js"></script> 
<script type="text/javascript"> 
ZENG.SysMsg.show('邮件格式错误!', "error"); 
ZENG.SysMsg.show('请重新来过!', "alert"); 
ZENG.SysMsg.show('保存成功!');</script>

jquery版:
/*! 
* jQuery JavaScript SysMsg v1.0 
* http://zengxiangzhan.cnblogs.com/ 
* jQuery.sysmsg.js 
* Copyright 2011, 曾祥展 
* Date: 2011-8-1 20:00 2011 -2210 
*/ 
if (!window.ZENG) var ZENG = {}; 
ZENG.add = function(d, f) { 
var j; 
if ($.isFunction(f.init)) { 
j = f.init; 
delete f.init; 
$.extend(true, j.prototype, f); 
this[d] = j 
} else this[d] = f 
}; 
ZENG.add("SysMsg", function() { 
function d(u, D, v) { 
D || (D = "success"); 
v = v || D == "error"; 
if (o) { 
h.push(function() { 
d(u, D) 
}); 
f() 
} else { 
m.html(u); 
i.removeClass().addClass(D).show().animate({ 
top: 0 
}, 200, function() { 
v || j() 
}); 
o = 1 
} 
} 
function f() { 
i.animate({ 
top: "-50px" 
}, 200, function() { 
i.hide(); 
o = 0; 
h.length && h.shift()() 
}) 
} 
function j() { 
setTimeout(function() { 
f() 
}, 2E3) 
} 
var o, h = [], 
i = $("#message-dock"), 
m = i.find("#message-text"); 
$(".dismiss", "#message-dock").live("click", function(u) { 
f(); 
u.preventDefault() 
}); 
return { 
show: d 
} 
}());

美观样式
.group { 
display: block; 
} 
.group:after { 
clear: both; 
content: "."; 
display: block; 
height: 0; 
visibility: hidden; 
} 
.group { 
min-height: 1%; 
} 
* html .group { 
height: 1%; 
} 
html, body, div,p{ 
background: none repeat scroll 0 0 transparent; 
border: 0 none; 
font-size: 100%; 
margin: 0; 
outline: 0 none; 
vertical-align: baseline; 
} 
body { 
color: #444444; 
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
font-size: 75%; 
line-height: 1; 
} 
#message-dock { 
background-color: #164673; 
color: #FFFFFF; 
line-height: 1.75em; 
padding: 10px; 
position: fixed; 
top: -60px; 
width: 100%; 
z-index: 9999; 
} 
#message-dock a { 
color: #FFFFFF; 
font-weight: bold; 
text-decoration: underline; 
} 
#message-dock p { 
border-radius: 5px 5px 5px 5px; 
float: left; 
padding: 5px 6px; 
} 
#message-dock .dismiss { 
background: url("msg.png") repeat scroll -67px -180px #A12A2A; 
border-radius: 0 5px 5px 0; 
display: none; 
float: left; 
height: 21px; 
padding-left: 10px; 
text-indent: -999999px; 
width: 20px; 
cursor: pointer; 
} 
.sprite { 
background: url("msg.png") no-repeat scroll 0 0 transparent; 
display: inline-block; 
vertical-align: top; 
} 
#message-sleeve { 
margin: 0 auto; 
max-width: 1200px; 
min-width: 1000px; 
} 
.fixed #message-sleeve { 
width: 1000px; 
} 
#message-text { 
float: left; 
font-size: 1.16667em; 
padding: 0 10px 0 0; 
} 
.success p { 
background-color: #7AA13D; 
} 
.alert p { 
background-color: #FFF095; 
color: #333333; 
} 
.alert a { 
color: #333333 !important; 
} 
.error p { 
background-color: #A12A2A; 
padding-right: 0 !important; 
} 
.error #message-text { 
padding-right: 0; 
} 
.error .dismiss { 
display: block !important; 
} 
.error .message-icon, .alert .message-icon { 
background-position: 0 -249px; 
} 
.message-icon { 
background-position: -21px -249px; 
float: left; 
height: 21px; 
margin-right: 6px; 
position: relative; 
width: 21px; 
}

附件:

基于jquery实现漂亮的动态信息提示效果

完毕!

Javascript 相关文章推荐
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
js中实现字符串和数组的相互转化详解
Jan 24 Javascript
深入解析JavaScript中函数的Currying柯里化
Mar 19 Javascript
javascript作用域、作用域链(菜鸟必看)
Jun 16 Javascript
React 组件间的通信示例
Jun 14 Javascript
微信小程序 数据缓存实现方法详解
Aug 26 Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 Javascript
angular inputNumber指令输入框只能输入数字的实现
Dec 03 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 12 Javascript
js最全的数组的降维5种办法(小结)
Apr 28 Javascript
Html5生成验证码的示例代码
May 10 Javascript
AJAX实现省市县三级联动效果
Oct 16 Javascript
基于jQuery替换table中的内容并显示进度条的代码
Aug 02 #Javascript
jQuery动态添加的元素绑定事件处理函数代码
Aug 02 #Javascript
jQuery ajax 路由和过滤器使用说明
Aug 02 #Javascript
js禁止小键盘输入数字功能代码
Aug 01 #Javascript
js内置对象 学习笔记
Aug 01 #Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
Jul 31 #Javascript
js动态加载以及确定加载完成的代码
Jul 31 #Javascript
You might like
如何在WIN2K下安装PHP4.04
2006/10/09 PHP
PHP 基本语法格式
2009/12/15 PHP
PHP sprintf() 函数的应用(定义和用法)
2012/06/29 PHP
php实现网页缓存的工具类分享
2015/07/14 PHP
php递归函数怎么用才有效
2018/02/24 PHP
脚本安需导入(装载)的三种模式的对比
2007/06/24 Javascript
javascript开发中因空格引发的错误
2010/11/08 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
react-router 路由切换动画的实现示例
2018/12/03 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
python解析文件示例
2014/01/23 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
Python中实现switch功能实例解析
2018/01/11 Python
matplotlib.pyplot画图 图片的二进制流的获取方法
2018/05/24 Python
Python GUI编程完整示例
2019/04/04 Python
Python的in,is和id函数代码实例
2020/04/18 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
HTML5 Notification(桌面提醒)功能使用实例
2014/03/17 HTML / CSS
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
橄榄树药房:OLIVEDA
2019/09/01 全球购物
个人找工作自荐信格式
2013/09/21 职场文书
大学共青团员个人自我评价
2014/04/16 职场文书
道德之星事迹材料
2014/05/03 职场文书
2014国庆节国旗下演讲稿(精选版)
2014/09/26 职场文书
2014年企业党建工作总结
2014/12/18 职场文书
2015年项目工作总结
2015/04/29 职场文书
因家庭原因离职的辞职信范文
2015/05/12 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
win10更新失败无限重启解决方法
2022/04/19 数码科技