腾讯UED 漂亮的提示信息效果代码

　　.zeng_msgbox_layer,

　　.zeng_msgbox_layer .gtl_ico_succ,

　　.zeng_msgbox_layer .gtl_ico_fail,

　　.zeng_msgbox_layer .gtl_ico_hits,

　　.zeng_msgbox_layer .gtl_ico_clear,

　　.zeng_msgbox_layer .gtl_end{display:inline-block;height:54px;line-height:54px;font-weight:bold;font-size:14px;color:#606060;background-image:url("gb_tip_layer.png");_background-image:url("gb_tip_layer_ie6.png");background-repeat:no-repeat;}

　　.zeng_msgbox_layer_wrap{width:100%;position:fixed;_position:absolute;top:46%;left:0;text-align:center;z-index:65533;}

　　.zeng_msgbox_layer{background-position:0 -161px;background-repeat:repeat-x;padding:0 18px 0 9px;margin:0 auto;position:relative;}

　　.zeng_msgbox_layer .gtl_ico_succ{background-position:-6px 0;left:-45px;top:0;width:45px;position:absolute;}

　　.zeng_msgbox_layer .gtl_end{background-position:0 0;position:absolute;right:-6px;top:0;width:6px;}

　　.zeng_msgbox_layer .gtl_ico_fail{background-position:-6px -108px;position:absolute;left:-45px;top:0;width:45px;}

　　.zeng_msgbox_layer .gtl_ico_hits{background-position:-6px -54px;position:absolute;left:-45px;top:0;width:45px;}

　　.zeng_msgbox_layer .gtl_ico_clear{background-position:-6px 0;left:-5px;width:5px;position:absolute;top:0;}

　　.zeng_msgbox_layer img{float:left;margin:19px 10px 0 5px ;}

　　window.ZENG=window.ZENG || {};

　　ZENG.dom = {getById: function(id) {

　　return document.getElementById(id);

　　},get: function(e) {

　　return (typeof (e) == "string") ? document.getElementById(e) : e;

　　},createElementIn: function(tagName, elem, insertFirst, attrs) {

　　var _e = (elem = ZENG.dom.get(elem) || document.body).ownerDocument.createElement(tagName || "div"), k;

　　if (typeof (attrs) == 'object') {

　　for (k in attrs) {

　　if (k == "class") {

　　_e.className = attrs[k];

　　} else if (k == "style") {

　　_e.style.cssText = attrs[k];

　　} else {

　　_e[k] = attrs[k];

　　}

　　}

　　}

　　insertFirst ? elem.insertBefore(_e, elem.firstChild) : elem.appendChild(_e);

　　return _e;

　　},getStyle: function(el, property) {

　　el = ZENG.dom.get(el);

　　if (!el || el.nodeType == 9) {

　　return null;

　　}

　　var w3cMode = document.defaultView && document.defaultView.getComputedStyle, computed = !w3cMode ? null : document.defaultView.getComputedStyle(el, ''), value = "";

　　switch (property) {

　　case "float":

　　property = w3cMode ? "cssFloat" : "styleFloat";

　　break;

　　case "opacity":

　　if (!w3cMode) {

　　var val = 100;

　　try {

　　val = el.filters['DXImageTransform.Microsoft.Alpha'].opacity;

　　} catch (e) {

　　try {

　　val = el.filters('alpha').opacity;

　　} catch (e) {

　　}

　　}

　　return val / 100;

　　} else {

　　return parseFloat((computed || el.style)[property]);

　　}

　　break;

　　case "backgroundPositionX":

　　if (w3cMode) {

　　property = "backgroundPosition";

　　return ((computed || el.style)[property]).split(" ")[0];

　　}

　　break;

　　case "backgroundPositionY":

　　if (w3cMode) {

　　property = "backgroundPosition";

　　return ((computed || el.style)[property]).split(" ")[1];

　　}

　　break;

　　}

　　if (w3cMode) {

　　return (computed || el.style)[property];

　　} else {

　　return (el.currentStyle[property] || el.style[property]);

　　}

　　},setStyle: function(el, properties, value) {

　　if (!(el = ZENG.dom.get(el)) || el.nodeType != 1) {

　　return false;

　　}

　　var tmp, bRtn = true, w3cMode = (tmp = document.defaultView) && tmp.getComputedStyle, rexclude = /z-?index|font-?weight|opacity|zoom|line-?height/i;

　　if (typeof (properties) == 'string') {

　　tmp = properties;

　　properties = {};

　　properties[tmp] = value;

　　}

　　for (var prop in properties) {

　　value = properties[prop];

　　if (prop == 'float') {

　　prop = w3cMode ? "cssFloat" : "styleFloat";

　　} else if (prop == 'opacity') {

　　if (!w3cMode) {

　　prop = 'filter';

　　value = value >= 1 ? '' : ('alpha(opacity=' + Math.round(value * 100) + ')');

　　}

　　} else if (prop == 'backgroundPositionX' || prop == 'backgroundPositionY') {

　　tmp = prop.slice(-1) == 'X' ? 'Y' : 'X';

　　if (w3cMode) {

　　var v = ZENG.dom.getStyle(el, "backgroundPosition" + tmp);

　　prop = 'backgroundPosition';

　　typeof (value) == 'number' && (value = value + 'px');

　　value = tmp == 'Y' ? (value + " " + (v || "top")) : ((v || 'left') + " " + value);

　　}

　　}

　　if (typeof el.style[prop] != "undefined") {

　　el.style[prop] = value + (typeof value === "number" && !rexclude.test(prop) ? 'px' : '');

　　bRtn = bRtn && true;

　　} else {

　　bRtn = bRtn && false;

　　}

　　}

　　return bRtn;

　　},getScrollTop: function(doc) {

　　var _doc = doc || document;

　　return Math.max(_doc.documentElement.scrollTop, _doc.body.scrollTop);

　　},getClientHeight: function(doc) {

　　var _doc = doc || document;

　　return _doc.compatMode == "CSS1Compat" ? _doc.documentElement.clientHeight : _doc.body.clientHeight;

　　}

　　};

　　ZENG.string = {RegExps: {trim: /^\s+|\s+$/g,ltrim: /^\s+/,rtrim: /\s+$/,nl2br: /\n/g,s2nb: /[\x20]{2}/g,URIencode: /[\x09\x0A\x0D\x20\x21-\x29\x2B\x2C\x2F\x3A-\x3F\x5B-\x5E\x60\x7B-\x7E]/g,escHTML: {re_amp: /&/g,re_lt: /</g,re_gt: />/g,re_apos: /\x27/g,re_quot: /\x22/g},escString: {bsls: /\\/g,sls: /\//g,nl: /\n/g,rt: /\r/g,tab: /\t/g},restXHTML: {re_amp: /&/g,re_lt: /</g,re_gt: />/g,re_apos: /&(?:apos|#0?39);/g,re_quot: /"/g},write: /\{(\d{1,2})(?:\:([xodQqb]))?\}/g,isURL: /^(?:ht|f)tp(?:s)?\:\/\/(?:[\w\-\.]+)\.\w+/i,cut: /[\x00-\xFF]/,getRealLen: {r0: /[^\x00-\xFF]/g,r1: /[\x00-\xFF]/g},format: /\{([\d\w\.]+)\}/g},commonReplace: function(s, p, r) {

　　return s.replace(p, r);

　　},format: function(str) {

　　var args = Array.prototype.slice.call(arguments), v;

　　str = String(args.shift());

　　if (args.length == 1 && typeof (args[0]) == 'object') {

　　args = args[0];

　　}

　　ZENG.string.RegExps.format.lastIndex = 0;

　　return str.replace(ZENG.string.RegExps.format, function(m, n) {

　　v = ZENG.object.route(args, n);

　　return v === undefined ? m : v;

　　});

　　}};

　　ZENG.object = {

　　routeRE: /([\d\w_]+)/g,

　　route: function(obj, path) {

　　obj = obj || {};

　　path = String(path);

　　var r = ZENG.object.routeRE, m;

　　r.lastIndex = 0;

　　while ((m = r.exec(path)) !== null) {

　　obj = obj[m[0]];

　　if (obj === undefined || obj === null) {

　　break;

　　}

　　}

　　return obj;

　　}};

　　var ua = ZENG.userAgent = {}, agent = navigator.userAgent;

　　ua.ie = 9 - ((agent.indexOf('Trident/5.0') > -1) ? 0 : 1) - (window.XDomainRequest ? 0 : 1) - (window.XMLHttpRequest ? 0 : 1);

　　if (typeof (ZENG.msgbox) == 'undefined') {

　　ZENG.msgbox = {};

　　}

　　ZENG.msgbox._timer = null;

　　ZENG.msgbox.loadingAnimationPath = ZENG.msgbox.loadingAnimationPath || ("loading.gif");

　　ZENG.msgbox.show = function(msgHtml, type, timeout, opts) {

　　if (typeof (opts) == 'number') {

　　opts = {topPosition: opts};

　　}

　　opts = opts || {};

　　var _s = ZENG.msgbox,

　　template = '<span class="zeng_msgbox_layer" style="display:none;z-index:10000;" id="mode_tips_v2"><span class="gtl_ico_{type}"></span>{loadIcon}{msgHtml}<span class="gtl_end"></span></span>', loading = '<img src="' + (opts.customIcon || _s.loadingAnimationPath) + '" alt="" />', typeClass = [0, 0, 0, 0, "succ", "fail", "clear"], mBox, tips;

　　_s._loadCss && _s._loadCss(opts.cssPath);

　　mBox = ZENG.dom.get("q_Msgbox") || ZENG.dom.createElementIn("div", document.body, false, {className: "zeng_msgbox_layer_wrap"});

　　mBox.id = "q_Msgbox";

　　mBox.style.display = "";

　　mBox.innerHTML = ZENG.string.format(template, {type: typeClass[type] || "hits",msgHtml: msgHtml || "",loadIcon: type == 6 ? loading : ""});

　　_s._setPosition(mBox, timeout, opts.topPosition);

　　};

　　ZENG.msgbox._setPosition = function(tips, timeout, topPosition) {

　　timeout = timeout || 5000;

　　var _s = ZENG.msgbox, bt = ZENG.dom.getScrollTop(), ch = ZENG.dom.getClientHeight(), t = Math.floor(ch / 2) - 40;

　　ZENG.dom.setStyle(tips, "top", ((document.compatMode == "BackCompat" || ZENG.userAgent.ie < 7) ? bt : 0) + ((typeof (topPosition) == "number") ? topPosition : t) + "px");

　　clearTimeout(_s._timer);

　　tips.firstChild.style.display = "";

　　timeout && (_s._timer = setTimeout(_s.hide, timeout));

　　};

　　ZENG.msgbox.hide = function(timeout) {

　　var _s = ZENG.msgbox;

　　if (timeout) {

　　clearTimeout(_s._timer);

　　_s._timer = setTimeout(_s._hide, timeout);

　　} else {

　　_s._hide();

　　}

　　};

　　ZENG.msgbox._hide = function() {

　　var _mBox = ZENG.dom.get("q_Msgbox"), _s = ZENG.msgbox;

　　clearTimeout(_s._timer);

　　if (_mBox) {

　　var _tips = _mBox.firstChild;

　　ZENG.dom.setStyle(_mBox, "display", "none");

　　}

　　};

　　ZENG.msgbox.show("设置成功！", 4, 2000);

　　ZENG.msgbox.show("服务器繁忙，请稍后再试。", 1, 2000);

　　ZENG.msgbox.show("数据拉取失败", 5, 2000);

　　ZENG.msgbox.show(" 正在加载中，请稍后...", 6,8000);