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

2020-05-18 08:59:21易采站长站整理

简单,漂亮,动画效果,用户体验好!
曾祥展


这个效果是在页面头部出现的,出现一下会自动隐藏,上面有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;