Realize beautiful dynamic information prompt effect based on jquery_jquery

Simple, beautiful, animated effects, good user experience!

This effect appears at the head of the page. It will be automatically hidden when it appears. If there is an x prompt on it, you need to close it manually. Others are automatically hidden!

Warm reminder: Based on jquery 1.6.2 version!

Copy code The code is as follows:

Calling method: Copy code The code is as follows: ZENG.SysMsg.show('Mail format error ! ', "error"); ZENG.SysMsg.show('Please try again!', "alert"); ZENG.SysMsg.show('Save successfully!'); jquery version: Copy code The code is as follows: /*! * jQuery JavaScript SysMsg v1.0 * http://zengxiangzhan.cnblogs.com/ * jQuery.sysmsg.js * Copyright 2011, Zeng Xiangzhan * 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 } }()); Beautiful style Copy code The code is as follows: .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; } 附件：

完毕！