基于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 相关文章推荐
javascript自动改变文字大小和颜色的效果的小例子
Aug 02 Javascript
jquery导航制件jquery鼠标经过变色效果示例
Dec 05 Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 Javascript
深入理解JQuery中的事件与动画
May 18 Javascript
js cookie实现记住密码功能
Jan 17 Javascript
动态加载css方法实现和深入解析
Jan 18 Javascript
实例解析Vue.js下载方式及基本概念
May 11 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
JS实现简单tab选项卡切换
Oct 25 Javascript
详解javascript void(0)
Jul 13 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
基于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
PHP音乐采集(部分代码)
2007/02/14 PHP
《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
PHP 文件锁与进程锁的使用示例
2017/08/07 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
JavaScript 常见安全漏洞和自动化检测技术
2015/08/21 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python线程指南详细介绍
2017/01/05 Python
深入浅析python 中的匿名函数
2018/05/21 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
Django调用百度AI接口实现人脸注册登录代码实例
2020/04/23 Python
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
ORLY官网:美国专业美甲一线品牌
2019/12/11 全球购物
写给学生的新学期寄语
2014/01/18 职场文书
幼儿园教学随笔感言
2014/02/23 职场文书
化妆品店促销方案
2014/02/24 职场文书
办护照工作证明
2014/10/01 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
2015年妇联工作总结范文
2015/04/22 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
Python代码,能玩30多款童年游戏!这些有几个是你玩过的
2021/04/27 Python
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle
MySQL修改默认引擎和字符集详情
2021/09/25 MySQL
Tomcat配置访问日志和线程数
2022/05/06 Servers