1010cc时时彩标准版 > 1010cc时时彩标准版 > 1010cc时时彩标准版不错的提醒音讯效果代码_jqu

原标题:1010cc时时彩标准版不错的提醒音讯效果代码_jqu

浏览次数:166 时间:2019-11-25

varpatterns={ HYPHEN://i, ROOT_TAG:/^body|html$/i }; vartoCamel=function{ //如果没有-[a-z]字母,则直接返回 if(!patterns.HYPHEN.test{ returnproperty; } //如果有缓存,直接返回替换后的值 if(propertyCache[property]){ returnpropertyCache[property]; } //使用正则替换 varconverted=property; while(patterns.HYPHEN.exec{ converted=converted.replace(RegExp.$1, RegExp.$1.substr; } //存入缓存 propertyCache[property]=converted; returnconverted; };在YAHOO.util.Dom中,getStyle函数考虑了更多不同浏览器兼容性方面的问题,代码如下 //使用W3CDOM标准的浏览器,比如Firefox、Opera、Safari if(document.defaultView&&document.defaultView.getComputedStyle){ getStyle=function{ varvalue=null; //重命名部分CSS样式名 if{ property='cssFloat'; } //获取通过CSS加上去的属性 varcomputed=document.defaultView.getComputedStyle{ value=computed[toCamel]; } returnel.style[property]||value; }; //如果是IE浏览器 }elseif(document.documentElement.currentStyle&&isIE){ getStyle=function{ switch{ //“转换”名称为IE可以认识的 case'opacity': varval=100; try{ val= el.filters['DXImageTransform.Microsoft.Alpha'].opacity; }catch{ try{ val=el.filters.opacity; }catch{ } } //百分比 returnval/100; case'float': property='styleFloat'; default: varvalue=el.currentStyle?el.currentStyle[property]:null; return(el.style[property]||value); } }; }else{ //获取内联样式 getStyle=function{returnel.style[property];}; }另外,PPK在他的Blog上的有关getStyle的阐述,也很精彩,有兴趣的可以去看下。

getStyle函数: 这里用到了三个原型扩展 String.prototype.capitalize 这个方法是让字符串首字母大写 Array.prototype.contains 判断数组中是否有指定成员 String.prototype.camelize 这个是让"font-size" 字符串转换成 "fontSize" 这样的格式用来获取样式 复制代码 代码如下: String.prototype.capitalize=function(){ return this.charAt this.substring; } Array.prototype.contains=function{ return ; } String.prototype.camelize=function(){ return this.replace/ig, function { return A.toUpperCase; } var css={ getStyle:function{ var value, elem=document.getElementById; if{ document.defaultView ? styles = 'float' /*cssFloat*/ : styles='styleFloat'; } value=elem.style[styles] || elem.style[styles.camelize{ if (document.defaultView && document.defaultView.getComputedStyle) { var _css=document.defaultView.getComputedStyle; value= _css ? _css.getPropertyValue : null; }else{ if { value = elem.currentStyle[styles.camelize()]; } } } if(value=="auto" && ["width","height"].contains && elem.style.display!="none"){ value=elem["offset" styles.capitalize()] "px"; } if{ try { value = elem.filters['DXImageTransform.Microsoft.Alpha'].opacity; value =value/100; }catch { try { value = elem.filters.opacity; } catch{} } } return value=="auto" ? null :value; } } css.getStyle; //100px; css.getStyle;//12px; css.getStyle;//left css.getStyle;//0.5 先回顾下基础1010cc时时彩标准版, style 标准的样式!可能是由style属性指定的! runtimeStyle 运行时的样式!如果与style的属性重叠,将覆盖style的属性! currentStyle 指 style 和 runtimeStyle 的结合! style 内联的样式 currentStyle 代表了在全局样式表、内嵌样式和 HTML 标签属性中指定的对象格式和样式 runtimeStyle 代表了居于全局样式表、内嵌样式和 HTML 标签属性指定的格式和样式之上的对象的格式和样式 (FF中没有currentStyle 和runtimeStyle) getStyle; 获取元素style标签内的样式 elem.style[styles] || elem.style[styles.camelize()] 支持传入"font-size"的写法 但这并不是最终的样式 . 获取最终样式 有两终办法 一个是 document.defaultView.getComputedStyle //w3c的方法 还有就是通过 elem.currentStyle["..."] //ie下的方法 currentStyle 方法 需要将带"-"字符的属性 需要通过String.prototype.camelize转换成ie可识别的属性 复制代码 代码如下: if(value=="auto" && ["width","height"].contains && elem.style.display!="none"){ value=elem["offset" styles.capitalize()] "px"; } 当 css中定义 元素的宽度为 auto时,并不能获取元素的最终宽度是多少,我们可以用 offsetWidth 和 offsetHeight 获取实际值 当然前提是要在元素为"可见"的状态下! 复制代码 代码如下: try { value = elem.filters['DXImageTransform.Microsoft.Alpha'].opacity; value =value/100; }catch { try { value = elem.filters.opacity; } catch{} } 这是获取透明度的方法,ie中定义透明度和其他浏览器不同.需把通过滤镜得到的opacity值/100。返回标准的opacity值;

var getStyle = function(el, style){
if(! "v1"){
if(style == "opacity"){
return getIEOpacity(el)
}
return el.currentStyle[camelize(style)];
}else{
return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)
}
}

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, .zeng_msgbox_layer .gtl_end{display:inline-block;height:54px;line-height:54px;font-weight:bold;font-size:14px;color:#606060;background-image:url;_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 ;} JAVASCRIPT: 复制代码 代码如下: window.ZENG=window.ZENG || {}; ZENG.dom = {getById: function { return document.getElementById; },get: function { return == "string") ? document.getElementById : e; },createElementIn: function(tagName, elem, insertFirst, attrs) { var _e = (elem = ZENG.dom.get || document.body).ownerDocument.createElement, k; if == 'object') { for { if { _e.className = attrs[k]; } else if { _e.style.cssText = attrs[k]; } else { _e[k] = attrs[k]; } } } insertFirst ? elem.insertBefore : elem.appendChild; return _e; },getStyle: function { el = ZENG.dom.get; if (!el || el.nodeType == 9) { return null; } var w3cMode = document.defaultView && document.defaultView.getComputedStyle, computed = !w3cMode ? null : document.defaultView.getComputedStyle, value = ""; switch { case "float": property = w3cMode ? "cssFloat" : "styleFloat"; break; case "opacity": if { var val = 100; try { val = el.filters['DXImageTransform.Microsoft.Alpha'].opacity; } catch { try { val = el.filters.opacity; } catch { } } return val / 100; } else { return parseFloat([property]); } break; case "backgroundPositionX": if { property = "backgroundPosition"; return ([property]).split[0]; } break; case "backgroundPositionY": if { property = "backgroundPosition"; return ([property]).split[1]; } break; } if { return [property]; } else { return (el.currentStyle[property] || el.style[property]); } },setStyle: function(el, properties, value) { if (!) || 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 == 'string') { tmp = properties; properties = {}; properties[tmp] = value; } for (var prop in properties) { value = properties[prop]; if { prop = w3cMode ? "cssFloat" : "styleFloat"; } else if { if { prop = 'filter'; value = value >= 1 ? '' : ('alpha(opacity=' Math.round; } } else if (prop == 'backgroundPositionX' || prop == 'backgroundPositionY') { tmp = prop.slice == 'X' ? 'Y' : 'X'; if { var v = ZENG.dom.getStyle(el, "backgroundPosition" tmp); prop = 'backgroundPosition'; typeof == 'number' && ; value = tmp == 'Y' ? (value " " : " " value); } } if (typeof el.style[prop] != "undefined") { el.style[prop] = value (typeof value === "number" && !rexclude.test; bRtn = bRtn && true; } else { bRtn = bRtn && false; } } return bRtn; },getScrollTop: function { var _doc = doc || document; return Math.max(_doc.documentElement.scrollTop, _doc.body.scrollTop); },getClientHeight: function { 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: /[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: /&;/g,re_quot: /"/g},write: /{?}/g,isURL: /^?://.w /i,cut: /[x00-xFF]/,getRealLen: {r0: /[^x00-xFF]/g,r1: /[x00-xFF]/g},format: /{}/g},commonReplace: function { return s.replace; },format: function { var args = Array.prototype.slice.call, v; str = String; if (args.length == 1 && typeof { args = args[0]; } ZENG.string.RegExps.format.lastIndex = 0; return str.replace(ZENG.string.RegExps.format, function { v = ZENG.object.route; return v === undefined ? m : v; }); }}; ZENG.object = { routeRE: //g, route: function { obj = obj || {}; path = String; var r = ZENG.object.routeRE, m; r.lastIndex = 0; while !== 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 ? 0 : 1) - (window.XDomainRequest ? 0 : 1) - (window.XMLHttpRequest ? 0 : 1); if == 'undefined') { ZENG.msgbox = {}; } ZENG.msgbox._timer = null; ZENG.msgbox.loadingAnimationPath = ZENG.msgbox.loadingAnimationPath || ; ZENG.msgbox.show = function(msgHtml, type, timeout, opts) { if == 'number') { opts = {topPosition: opts}; } opts = opts || {}; var _s =

复制代码 代码如下: #flower { width:100px; font-size:12px; float:left; opacity:0.5; filter:alpha; } 定义一个的div元素 并设置如上样式,我们的目标就是通过javascript来获取样式的最终属性

复制代码 代码如下:

ZENG.msgbox, template = '{loadIcon}{msgHtml}', loading

'1010cc时时彩标准版 1 ')', typeClass = [0, 0, 0, 0, "succ", "fail", "clear"], mBox, tips; _s._loadCss && _s._loadCss; mBox = ZENG.dom.get || 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

  • 40; ZENG.dom.setStyle(tips, "top", ((document.compatMode == "BackCompat" || ZENG.userAgent.ie < 7) ? bt : 0) == "number") ? topPosition : t) "px"); clearTimeout; tips.firstChild.style.display = ""; timeout && (_s._timer = setTimeout; }; ZENG.msgbox.hide = function { var _s = ZENG.msgbox; if { clearTimeout; _s._timer = setTimeout; } else { _s._hide(); } }; ZENG.msgbox._hide = function() { var _mBox = ZENG.dom.get, _s = ZENG.msgbox; clearTimeout; if { var _tips = _mBox.firstChild; ZENG.dom.setStyle(_mBox, "display", "none"); } }; 调用: 复制代码 代码如下: ZENG.msgbox.show; ZENG.msgbox.show("服务器繁忙,请稍后再试。", 1, 2000); ZENG.msgbox.show; ZENG.msgbox.show(" 正在加载中,请稍后...", 6,8000); 演示和下载体验: 腾讯UED-漂亮的提示信息

...

到最难的部分了——精确取得高度与宽度。如果用过JQuery的人都知道,John Resig是单独处理这两个属性。其实何止JQuery,其他库都为此头痛。问题的起因是如果没有内联样式或内部样式显式地设置这两个属性,我们在IE下是无法获取它们精确的值,或者获得的是百分比,空字符串,auto,inhert等让人无可奈何的东西。另,对于国人来说,px的地位是远远高于em。总总原因,让我们不能放弃这两个属性。为了取得这两个属性的精确值,我们就需要研究一下CSS继承问题了。我也已撰写相关博文《CSS的inhert与auto》来探讨这问题,没有看,请看完再回来,要不,根本是无法看下去的。
根据CSS的分类,width与height是属性于non-inherited property,由此可知,如果我们不为它设值,默认为auto。这个auto是个神奇的东东,如果是块状元素,它的宽就相当于100%,撑满父元素的内容区,当然这是在不考虑其padding,border与margin的情况下。如果是内联元素,由于不具备盒子模型,你给它设置宽与高是没有意义的,就算在火狐,返回的改过转换的精确值与你看到的情况完全不吻合,如果没有设置,直接返回auto。为了取得以px为单位的精确值,为了屏蔽块状元素与内联元素,我们需要转换思路,不过光盯着CSS属性转。这时,微软做了件好事,开发出offsetXX,clientXX与scrollXX三大家族,现在终于纳入W3C的标准。不过早在这之前,各浏览器已经跟风实现了。
在标准模式中,offsetWidth是包含padding,borderWidth与width,如果存在滚动条,它的offsetWidth也不会变,滚动条的宽度在各浏览器非常一致,都为17px,这时它就会把width减去17px,缺失的空间由滚动条补上。 offsetWidth 如果存在padding与padding,我们就要减去padding与padding 在怪癖模式下,offsetWidth等于width,而width是包含padding与borderWidth。 offsetHeight同理。 clientXX家族好理解,就是不包含borderWidth与滚动条。scrollXX家族不说了,在五大浏览器都不一致。因此,在标准模式中,要取得高与宽,首选clientXX家族,怪癖模式中,首先offsetXX家族。
这时不得不说一下怪癖模式了,别以为升到IE8,设置相应DocType就可以逃过一劫,只要你的网页太多地方不按标准写,IE也转为兼容模式中运作。这兼容模式是否等于怪癖模式就不得而已,因为IE8有多达五种渲染模式,IE5怪癖模式,IE7标准模式,IE8几乎标准模式,IE7兼容模式与支持HTML5的边缘模式。这么多模式,你以为光靠 document.compatMode == "CSS1Compat"能撑住吗?!撑不住的,幸好IE8在添加新模式的同时,又添加了一个 document.documentMode属性,真不知是喜还是悲了。因此判断是否运行于怪癖模式的代码为:

发现在IE取得值太精确了,比火狐还准确,不过我也不打算在程序内部设置取精度的运算,因为我不确定现实中究竟会向上遍历多少次。在某一父元素的padding与width取精度,很可能会严重影响其最终值的精度。基本上,width与height与padding的取值就到此为止,我们再来看盒子模型的两个东西:margin与border。
margin的auto通常为0px,但在IE6下,当我们将其父元素的text-align设为center,它不但把文本居中,连块级元素本身也忧患中了,这是IE6居中布局的基石。很难说这是BUG,就像IE5的怪癖模式的盒子模型那样,很符合人通常的思维习惯,但是较难实现,加之W3C是偏袒被微软阴死的网景,于是网景的盒子模型成为标准了。IE6庞大的用户基础不容忽视,我们不能随便给0px了事。我也说了,auto有个对称性,因此好办,我们求出其父元素的width然后减于其offsetWidth再除以2就行了。因为offsetWidth是针对于offsertParent的,因此我们用时临时把其父元素的position设为relative,让子元素来得offsetWidth后,再将父元素的position还原。

子元素

嗯,文章已经很长很长,剩下的部分下次再讲。

复制代码 代码如下:

复制代码 代码如下:

接着我们单独解决IE的透明度问题,基本各大类库都是这样做的,可见这问题多么棘手,实在要感谢微软那帮天才:

JQuery,mootools,Ext等类库在这部分实现得非常艰辛,盘根错节地动用一大堆方法,因此想把这部分抠出来难度很大。深入研究它们的实现后,根据我积累的CSS知识,终于做出一个非常简炼的版本出来。它相当于JQuery.cssCur吧,不过或许功能还丰富一些,按饮食业话说叫“加量不加价”,我的可能还应叫“加量还减价”……版本还处于Beta阶段,由于只个工具函数就不弄成类了。

非常危险的做法,比Prototype的实现还差劲,因此它就不得在其他部分进行纠正,这就是为什么它的UI体积如此庞大的缘故,从侧面也突现JQuery实现手法的高超。不过JQuery的实现了也是相当复杂,如果本元素无法取得精确值,就从上级元素着手,这个遍历消耗非常严重。其中还借用了Dean Edwards的一个伟大的hack:

接着下来float属性问题。IE这边是styleFloat,W3C是cssFloat。解决不是问题,不过每次都要转换太麻烦了,我参照Ext的实现把它们缓存起来。

本文由1010cc时时彩标准版发布于1010cc时时彩标准版,转载请注明出处:1010cc时时彩标准版不错的提醒音讯效果代码_jqu

关键词:

上一篇:1010cc时时彩标准版js获取成分在页面包车型大巴相

下一篇:没有了