> 웹 프론트엔드 > JS 튜토리얼 > Tencent UED 아름다운 프롬프트 정보 효과 code_jquery

Tencent UED 아름다운 프롬프트 정보 효과 code_jquery

WBOY
풀어 주다: 2016-05-16 18:02:28
원래의
1407명이 탐색했습니다.

腾讯UED 漂亮的提示信息

腾讯UED 漂亮的提示信息


CSS样式:
复代码 代码如下:

.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, g_msgbox_layer .gtl_end{display:inline- 블록;높이:54px;라인 높이:54px;글꼴-무게:bold;글꼴-크기:14px;색상:#606060;배경-이미지:url("gb_tip_layer.png");_배경-이미지: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{배경-위치:0 -161px;배경-반복:repeat-x;padding:0 18px 0 9px;margin:0 auto;position:relative;}
.zeng_msgbox_layer . gtl_ico_succ{배경 위치:-6px 0;왼쪽:-45px;상단:0;너비:45px;위치:절대;}
.zeng_msgbox_layer .gtl_end{배경 위치:0 0;위치:절대;오른쪽:- 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{배경 위치:-6px -54px;위치:절대;왼쪽:-45px;상단:0;너비:45px;}
.zeng_msgbox_layer .gtl_ico_clear{배경 위치:-6px 0;왼쪽:- 5px;width:5px;position:absolute;top:0;}
.zeng_msgbox_layer img{float:left;margin:19px 10px 0 5px ;}

JAVASCRIPT:

复代码 代码如下:

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 == "스타일") {
_e.style.cssText = attrs[k];
} else {
_e[k] = attrs[k];
}
}
}
insertFirst ? elem.insertBefore(_e, elem.firstChild) : elem.appendChild(_e);
반환 _e;
},getStyle: function(el, property) {
el = ZENG.dom.get(el);
if (!el || el.nodeType == 9) {
return null;
}
var w3cMode = document.defaultView && document.defaultView.getComputeStyle, 계산 = !w3cMode ? null : document.defaultView.getCompulatedStyle(el, ''), value = "";
스위치(속성) {
case "float":
property = w3cMode ? "cssFloat": "styleFloat";
휴식;
case "불투명도":
if (!w3cMode) {
var val = 100;
시도해 보세요 {
val = el.filters['DXImageTransform.Microsoft.Alpha'].opacity;
} catch (e) {
try {
val = el.filters('alpha').opacity;
} catch (e) {
}
}
return val / 100;
} else {
return parsFloat((계산됨 || el.style)[property]);
}
휴식;
case "BackgroundPositionX":
if (w3cMode) {
property = "BackgroundPosition";
return ((계산됨 || el.style)[속성]).split(" ")[0];
}
휴식;
case "BackgroundPositionY":
if (w3cMode) {
property = "BackgroundPosition";
return ((계산됨 || el.style)[속성]).split(" ")[1];
}
휴식;
}
if (w3cMode) {
return (계산됨 || el.style)[property];
} else {
return (el.currentStyle[속성] || el.style[속성]);
}
},setStyle: function(el, Properties, value) {
if (!(el = ZENG.dom.get(el)) || el.nodeType != 1) {
거짓을 반환;
}
var tmp, bRtn = true, w3cMode = (tmp = document.defaultView) && tmp.getCompulatedStyle, rexclude = /z-?index|font-?weight|opacity|zoom|line-?height/ 나;
if (typeof (속성) == '문자열') {
tmp = 속성;
속성 = {};
속성[tmp] = 값;
}
for(속성의 var prop) {
value = Properties[prop];
if (prop == 'float') {
prop = w3cMode ? "cssFloat": "styleFloat";
} else if (prop == '불투명도') {
if (!w3cMode) {
prop = 'filter';
값 = 값 >= 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 = '배경 위치';
typeof(값) == '숫자' &&(값 = 값 'px');
값 = tmp == 'Y' ? (값 " " (v || "상단")) : ((v || '왼쪽') " " 값);
}
}
if (typeof el.style[prop] != "undefine") {
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 || 문서;
return Math.max(_doc.documentElement.scrollTop, _doc.body.scrollTop);
},getClientHeight: function(doc) {
var _doc = doc || 문서;
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: /[x09x0Ax0Dx20x21-x29x2Bx2Cx2Fx3A-x3Fx5B-x5Ex60x7B-x7E]/g,escHTML: {re_amp: /&/g,re_lt: //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_apos: /&(?:apos|#0?39);/g,re_quot: /" /g}, 쓰기: /{(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: /{([dw.] )}/g},commonReplace: 함수(s, p, r) {
return s.replace(p, r)
},format: 함수 (str) {
var args = Array.prototype.slice.call(arguments), v;
str = String(args.shift())
if (args.length == 1 && typeof (args[0]) == '객체') {
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 === 정의되지 않음 ? 남 : v;
});
}};
ZENG.object = {
routeRE: /([dw_] )/g,
route: function(obj, path) {
obj = obj || {};
경로 = 문자열(경로);
var r = ZENG.object.routeRE, m;
r.lastIndex = 0;
while ((m = r.exec(path)) !== null) {
obj = obj[m[0]];
if (obj === 정의되지 않음 || obj === null) {
break;
}
}
return obj;
}};
var ua = ZENG.userAgent = {}, 에이전트 = 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) == '정의되지 않음') {
ZENG.msgbox = {};
}
ZENG.msgbox._timer = null;
ZENG.msgbox.loadingAnimationPath = ZENG.msgbox.loadingAnimationPath || ("로딩.gif");
ZENG.msgbox.show = function(msgHtml, type, timeout, opts) {
if (typeof (opts) == 'number') {
opts = {topPosition: opts};
}
선택 = 선택 || {};
var _s = ZENG.msgbox,
template = '

调사용:
复代码 代码如下:

ZENG .msgbox.show("设置成功!", 4, 2000);
ZENG.msgbox.show("服务器繁忙,请稍后再试。", 1, 2000);
ZENG.msgbox.show("数据拉取失败", 5, 2000);
ZENG.msgbox.show(" 正在加载中,请稍后...", 6,8000);

演示和下载体验: 腾讯UED-漂亮的提示信息
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿