基于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 相关文章推荐
js程序中美元符号$是什么
Jun 05 Javascript
写出更好的JavaScript程序之undefined篇(中)
Nov 23 Javascript
微信jssdk用法汇总
Jul 16 Javascript
AngularJS入门教程之XHR和依赖注入详解
Aug 18 Javascript
javascript构造函数以及原型对象的理解
Jan 13 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
Feb 01 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 Javascript
vue引入Excel表格插件的方法
Apr 28 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使之能同时支持GIF和JPEG
2006/10/09 PHP
php关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
php判断变量类型常用方法
2012/04/24 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
thinkPHP数据查询常用方法总结【select,find,getField,query】
2017/03/15 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
jquery 新浪网易的评论块制作
2010/07/01 Javascript
js 中 document.createEvent的用法
2010/08/29 Javascript
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
2017/02/17 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
在Python的Django框架中用流响应生成CSV文件的教程
2015/05/02 Python
Django中使用locals()函数的技巧
2015/07/16 Python
Windows下的Jupyter Notebook 安装与自定义启动(图文详解)
2018/02/21 Python
在Tensorflow中查看权重的实现
2020/01/24 Python
python实现斗地主分牌洗牌
2020/06/22 Python
CSS3实现多背景展示效果通过CSS3定位多张背景
2014/08/10 HTML / CSS
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
毕业生自我鉴定
2013/12/04 职场文书
师范毕业生自我鉴定
2014/01/15 职场文书
精彩的广告词
2014/03/19 职场文书
二年级班级文化建设方案
2014/05/10 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
财务经理岗位职责
2015/01/31 职场文书
个人催款函范文
2015/06/23 职场文书