| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | --Do not remove this if you are using-- |
| A | 2 | Original Author: Remiz Rahnas |
| 3 | Original Author URL: http://www.htmlremix.com | |
| 4 | Published date: 2008/09/24 | |
| 5 | ||
| 6 | Changes by Nick Fetchak: | |
| 7 | - IE8 standards mode compatibility | |
| 8 | - VML elements now positioned behind original box rather than inside of it - should be less prone to breakage | |
| 9 | - Added partial support for 'box-shadow' style | |
| 10 | - Checks for VML support before doing anything | |
| 11 | - Updates VML element size and position via timer and also via window resize event | |
| 12 | - lots of other small things | |
| 13 | Published date : 2010/03/14 | |
| 14 | http://fetchak.com/ie-css3 | |
| 15 | ||
| 16 | Thanks to TheBrightLines.com (http://www.thebrightlines.com/2009/12/03/using-ies-filter-in-a-cross-browser-way) for enlightening me about the DropShadow filter | |
| 17 | ||
| 18 | <public:attach event="ondocumentready" onevent="ondocumentready('v08vnSVo78t4JfjH')" /> | |
| 19 | <script type="text/javascript"> | |
| 20 | ||
| 21 | timer_length = 200; // Milliseconds | |
| 22 | border_opacity = false; // Use opacity on borders of rounded-corner elements? Note: This causes antialiasing issues | |
| 23 | ||
| 24 | ||
| 25 | // supportsVml() borrowed from http://stackoverflow.com/questions/654112/how-do-you-detect-support-for-vml-or-svg-in-a-browser | |
| 26 | function supportsVml() { | |
| 27 | if (typeof supportsVml.supported == "undefined") { | |
| 28 | var a = document.body.appendChild(document.createElement('div')); | |
| 29 | a.innerHTML = '<v:shape id="vml_flag1" adj="1" />'; | |
| 30 | var b = a.firstChild; | |
| 31 | b.style.behavior = "url(#default#VML)"; | |
| 32 | supportsVml.supported = b ? typeof b.adj == "object": true; | |
| 33 | a.parentNode.removeChild(a); | |
| 34 | } | |
| 35 | return supportsVml.supported | |
| 36 | } | |
| 37 | ||
| 38 | ||
| 39 | // findPos() borrowed from http://www.quirksmode.org/js/findpos.html | |
| 40 | function findPos(obj) { | |
| 41 | var curleft = curtop = 0; | |
| 42 | ||
| 43 | if (obj.offsetParent) { | |
| 44 | do { | |
| 45 | curleft += obj.offsetLeft; | |
| 46 | curtop += obj.offsetTop; | |
| 47 | } while (obj = obj.offsetParent); | |
| 48 | } | |
| 49 | ||
| 50 | return({ | |
| 51 | 'x': curleft, | |
| 52 | 'y': curtop | |
| 53 | }); | |
| 54 | } | |
| 55 | ||
| 56 | function createBoxShadow(element, vml_parent) { | |
| 57 | var style = element.currentStyle['iecss3-box-shadow'] || element.currentStyle['-moz-box-shadow'] || element.currentStyle['-webkit-box-shadow'] || element.currentStyle['box-shadow'] || ''; | |
| 58 | var match = style.match(/^(\d+)px (\d+)px (\d+)px/); | |
| 59 | if (!match) { return(false); } | |
| 60 | ||
| 61 | ||
| 62 | var shadow = document.createElement('v:roundrect'); | |
| 63 | shadow.userAttrs = { | |
| 64 | 'x': parseInt(RegExp.$1 || 0), | |
| 65 | 'y': parseInt(RegExp.$2 || 0), | |
| 66 | 'radius': parseInt(RegExp.$3 || 0) / 2 | |
| 67 | }; | |
| 68 | shadow.position_offset = { | |
| 69 | 'y': (0 - vml_parent.pos_ieCSS3.y - shadow.userAttrs.radius + shadow.userAttrs.y), | |
| 70 | 'x': (0 - vml_parent.pos_ieCSS3.x - shadow.userAttrs.radius + shadow.userAttrs.x) | |
| 71 | }; | |
| 72 | shadow.size_offset = { | |
| 73 | 'width': 0, | |
| 74 | 'height': 0 | |
| 75 | }; | |
| 76 | shadow.arcsize = element.arcSize +'px'; | |
| 77 | shadow.style.display = 'block'; | |
| 78 | shadow.style.position = 'absolute'; | |
| 79 | shadow.style.top = (element.pos_ieCSS3.y + shadow.position_offset.y) +'px'; | |
| 80 | shadow.style.left = (element.pos_ieCSS3.x + shadow.position_offset.x) +'px'; | |
| 81 | shadow.style.width = element.offsetWidth +'px'; | |
| 82 | shadow.style.height = element.offsetHeight +'px'; | |
| 83 | shadow.style.antialias = true; | |
| 84 | shadow.className = 'vml_box_shadow'; | |
| 85 | shadow.style.zIndex = element.zIndex - 1; | |
| 86 | shadow.style.filter = 'progid:DXImageTransform.Microsoft.Blur(pixelRadius='+ shadow.userAttrs.radius +',makeShadow=true,shadowOpacity='+ element.opacity +')'; | |
| 87 | ||
| 88 | element.parentNode.appendChild(shadow); | |
| 89 | //element.parentNode.insertBefore(shadow, element.element); | |
| 90 | ||
| 91 | // For window resizing | |
| 92 | element.vml.push(shadow); | |
| 93 | ||
| 94 | return(true); | |
| 95 | } | |
| 96 | ||
| 97 | function createBorderRect(element, vml_parent) { | |
| 98 | if (isNaN(element.borderRadius)) { return(false); } | |
| 99 | ||
| 100 | element.style.background = 'transparent'; | |
| 101 | element.style.borderColor = 'transparent'; | |
| 102 | ||
| 103 | var rect = document.createElement('v:roundrect'); | |
| 104 | rect.position_offset = { | |
| 105 | 'y': (0.5 * element.strokeWeight) - vml_parent.pos_ieCSS3.y, | |
| 106 | 'x': (0.5 * element.strokeWeight) - vml_parent.pos_ieCSS3.x | |
| 107 | }; | |
| 108 | rect.size_offset = { | |
| 109 | 'width': 0 - element.strokeWeight, | |
| 110 | 'height': 0 - element.strokeWeight | |
| 111 | }; | |
| 112 | rect.arcsize = element.arcSize +'px'; | |
| 113 | rect.strokeColor = element.strokeColor; | |
| 114 | rect.strokeWeight = element.strokeWeight +'px'; | |
| 115 | rect.stroked = element.stroked; | |
| 116 | rect.className = 'vml_border_radius'; | |
| 117 | rect.style.display = 'block'; | |
| 118 | rect.style.position = 'absolute'; | |
| 119 | rect.style.top = (element.pos_ieCSS3.y + rect.position_offset.y) +'px'; | |
| 120 | rect.style.left = (element.pos_ieCSS3.x + rect.position_offset.x) +'px'; | |
| 121 | rect.style.width = (element.offsetWidth + rect.size_offset.width) +'px'; | |
| 122 | rect.style.height = (element.offsetHeight + rect.size_offset.height) +'px'; | |
| 123 | rect.style.antialias = true; | |
| 124 | rect.style.zIndex = element.zIndex - 1; | |
| 125 | ||
| 126 | if (border_opacity && (element.opacity < 1)) { | |
| 127 | rect.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity='+ parseFloat(element.opacity * 100) +')'; | |
| 128 | } | |
| 129 | ||
| 130 | var fill = document.createElement('v:fill'); | |
| 131 | fill.color = element.fillColor; | |
| 132 | fill.src = element.fillSrc; | |
| 133 | fill.className = 'vml_border_radius_fill'; | |
| 134 | fill.type = 'tile'; | |
| 135 | fill.opacity = element.opacity; | |
| 136 | ||
| 137 | // Hack: IE6 doesn't support transparent borders, use padding to offset original element | |
| 138 | isIE6 = /msie|MSIE 6/.test(navigator.userAgent); | |
| 139 | if (isIE6 && (element.strokeWeight > 0)) { | |
| 140 | element.style.borderStyle = 'none'; | |
| 141 | element.style.paddingTop = parseInt(element.currentStyle.paddingTop || 0) + element.strokeWeight; | |
| 142 | element.style.paddingBottom = parseInt(element.currentStyle.paddingBottom || 0) + element.strokeWeight; | |
| 143 | } | |
| 144 | ||
| 145 | rect.appendChild(fill); | |
| 146 | element.parentNode.appendChild(rect); | |
| 147 | //element.parentNode.insertBefore(rect, element.element); | |
| 148 | ||
| 149 | // For window resizing | |
| 150 | element.vml.push(rect); | |
| 151 | ||
| 152 | return(true); | |
| 153 | } | |
| 154 | ||
| 155 | function createTextShadow(element, vml_parent) { | |
| 156 | if (!element.textShadow) { return(false); } | |
| 157 | ||
| 158 | var match = element.textShadow.match(/^(\d+)px (\d+)px (\d+)px (#?\w+)/); | |
| 159 | if (!match) { return(false); } | |
| 160 | ||
| 161 | ||
| 162 | //var shadow = document.createElement('span'); | |
| 163 | var shadow = element.cloneNode(true); | |
| 164 | var radius = parseInt(RegExp.$3 || 0); | |
| 165 | shadow.userAttrs = { | |
| 166 | 'x': parseInt(RegExp.$1 || 0) - (radius), | |
| 167 | 'y': parseInt(RegExp.$2 || 0) - (radius), | |
| 168 | 'radius': radius / 2, | |
| 169 | 'color': (RegExp.$4 || '#000') | |
| 170 | }; | |
| 171 | shadow.position_offset = { | |
| 172 | 'y': (0 - vml_parent.pos_ieCSS3.y + shadow.userAttrs.y), | |
| 173 | 'x': (0 - vml_parent.pos_ieCSS3.x + shadow.userAttrs.x) | |
| 174 | }; | |
| 175 | shadow.size_offset = { | |
| 176 | 'width': 0, | |
| 177 | 'height': 0 | |
| 178 | }; | |
| 179 | shadow.style.color = shadow.userAttrs.color; | |
| 180 | shadow.style.position = 'absolute'; | |
| 181 | shadow.style.top = (element.pos_ieCSS3.y + shadow.position_offset.y) +'px'; | |
| 182 | shadow.style.left = (element.pos_ieCSS3.x + shadow.position_offset.x) +'px'; | |
| 183 | shadow.style.antialias = true; | |
| 184 | shadow.style.behavior = null; | |
| 185 | shadow.className = 'ieCSS3_text_shadow'; | |
| 186 | shadow.innerHTML = element.innerHTML; | |
| 187 | // For some reason it only looks right with opacity at 75% | |
| 188 | shadow.style.filter = '\ | |
| 189 | progid:DXImageTransform.Microsoft.Alpha(Opacity=75)\ | |
| 190 | progid:DXImageTransform.Microsoft.Blur(pixelRadius='+ shadow.userAttrs.radius +',makeShadow=false,shadowOpacity=100)\ | |
| 191 | '; | |
| 192 | ||
| 193 | var clone = element.cloneNode(true); | |
| 194 | clone.position_offset = { | |
| 195 | 'y': (0 - vml_parent.pos_ieCSS3.y), | |
| 196 | 'x': (0 - vml_parent.pos_ieCSS3.x) | |
| 197 | }; | |
| 198 | clone.size_offset = { | |
| 199 | 'width': 0, | |
| 200 | 'height': 0 | |
| 201 | }; | |
| 202 | clone.style.behavior = null; | |
| 203 | clone.style.position = 'absolute'; | |
| 204 | clone.style.top = (element.pos_ieCSS3.y + clone.position_offset.y) +'px'; | |
| 205 | clone.style.left = (element.pos_ieCSS3.x + clone.position_offset.x) +'px'; | |
| 206 | clone.className = 'ieCSS3_text_shadow'; | |
| 207 | ||
| 208 | ||
| 209 | element.parentNode.appendChild(shadow); | |
| 210 | element.parentNode.appendChild(clone); | |
| 211 | ||
| 212 | element.style.visibility = 'hidden'; | |
| 213 | ||
| 214 | // For window resizing | |
| 215 | element.vml.push(clone); | |
| 216 | element.vml.push(shadow); | |
| 217 | ||
| 218 | return(true); | |
| 219 | } | |
| 220 | ||
| 221 | function ondocumentready(classID) { | |
| 222 | if (!supportsVml()) { return(false); } | |
| 223 | ||
| 224 | if (this.className.match(classID)) { return(false); } | |
| 225 | this.className = this.className.concat(' ', classID); | |
| 226 | ||
| 227 | // Add a namespace for VML (IE8 requires it) | |
| 228 | if (!document.namespaces.v) { document.namespaces.add("v", "urn:schemas-microsoft-com:vml"); } | |
| 229 | ||
| 230 | // Check to see if we've run once before on this page | |
| 231 | if (typeof(window.ieCSS3) == 'undefined') { | |
| 232 | // Create global ieCSS3 object | |
| 233 | window.ieCSS3 = { | |
| 234 | 'vmlified_elements': new Array(), | |
| 235 | 'update_timer': setInterval(updatePositionAndSize, timer_length) | |
| 236 | }; | |
| 237 | ||
| 238 | if (typeof(window.onresize) == 'function') { window.ieCSS3.previous_onresize = window.onresize; } | |
| 239 | ||
| 240 | // Attach window resize event | |
| 241 | window.onresize = updatePositionAndSize; | |
| 242 | } | |
| 243 | ||
| 244 | ||
| 245 | // These attrs are for the script and have no meaning to the browser: | |
| 246 | this.borderRadius = parseInt(this.currentStyle['iecss3-border-radius'] || | |
| 247 | this.currentStyle['-moz-border-radius'] || | |
| 248 | this.currentStyle['-webkit-border-radius'] || | |
| 249 | this.currentStyle['border-radius'] || | |
| 250 | this.currentStyle['-khtml-border-radius']); | |
| 251 | this.arcSize = Math.min(this.borderRadius / Math.min(this.offsetWidth, this.offsetHeight), 1); | |
| 252 | this.fillColor = this.currentStyle.backgroundColor; | |
| 253 | this.fillSrc = this.currentStyle.backgroundImage.replace(/^url\("(.+)"\)$/, '$1'); | |
| 254 | this.strokeColor = this.currentStyle.borderColor; | |
| 255 | this.strokeWeight = parseInt(this.currentStyle.borderWidth); | |
| 256 | this.stroked = 'true'; | |
| 257 | if (isNaN(this.strokeWeight) || (this.strokeWeight == 0)) { | |
| 258 | this.strokeWeight = 0; | |
| 259 | this.strokeColor = fillColor; | |
| 260 | this.stroked = 'false'; | |
| 261 | } | |
| 262 | this.opacity = parseFloat(this.currentStyle.opacity || 1); | |
| 263 | this.textShadow = this.currentStyle['text-shadow']; | |
| 264 | ||
| 265 | this.element.vml = new Array(); | |
| 266 | this.zIndex = parseInt(this.currentStyle.zIndex); | |
| 267 | if (isNaN(this.zIndex)) { this.zIndex = 0; } | |
| 268 | ||
| 269 | // Find which element provides position:relative for the target element (default to BODY) | |
| 270 | vml_parent = this; | |
| 271 | var limit = 100, i = 0; | |
| 272 | do { | |
| 273 | vml_parent = vml_parent.parentElement; | |
| 274 | i++; | |
| 275 | if (i >= limit) { return(false); } | |
| 276 | } while ((typeof(vml_parent) != 'undefined') && (vml_parent.currentStyle.position != 'relative') && (vml_parent.tagName != 'BODY')); | |
| 277 | ||
| 278 | vml_parent.pos_ieCSS3 = findPos(vml_parent); | |
| 279 | this.pos_ieCSS3 = findPos(this); | |
| 280 | ||
| 281 | var rv1 = createBoxShadow(this, vml_parent); | |
| 282 | var rv2 = createBorderRect(this, vml_parent); | |
| 283 | var rv3 = createTextShadow(this, vml_parent); | |
| 284 | if (rv1 || rv2 || rv3) { window.ieCSS3.vmlified_elements.push(this.element); } | |
| 285 | ||
| 286 | if (typeof(vml_parent.document.ieCSS3_stylesheet) == 'undefined') { | |
| 287 | vml_parent.document.ieCSS3_stylesheet = vml_parent.document.createStyleSheet(); | |
| 288 | vml_parent.document.ieCSS3_stylesheet.addRule("v\\:roundrect", "behavior: url(#default#VML)"); | |
| 289 | vml_parent.document.ieCSS3_stylesheet.addRule("v\\:fill", "behavior: url(#default#VML)"); | |
| 290 | // Compatibility with IE7.js | |
| 291 | vml_parent.document.ieCSS3_stylesheet.ie7 = true; | |
| 292 | } | |
| 293 | } | |
| 294 | ||
| 295 | function updatePositionAndSize() { | |
| 296 | if (typeof(window.ieCSS3.vmlified_elements) != 'object') { return(false); } | |
| 297 | ||
| 298 | for (var i in window.ieCSS3.vmlified_elements) { | |
| 299 | var el = window.ieCSS3.vmlified_elements[i]; | |
| 300 | ||
| 301 | if (typeof(el.vml) != 'object') { continue; } | |
| 302 | ||
| 303 | for (var z in el.vml) { | |
| 304 | //var parent_pos = findPos(el.vml[z].parentNode); | |
| 305 | var new_pos = findPos(el); | |
| 306 | new_pos.x = (new_pos.x + el.vml[z].position_offset.x) + 'px'; | |
| 307 | new_pos.y = (new_pos.y + el.vml[z].position_offset.y) + 'px'; | |
| 308 | if (el.vml[z].style.left != new_pos.x) { el.vml[z].style.left = new_pos.x; } | |
| 309 | if (el.vml[z].style.top != new_pos.y) { el.vml[z].style.top = new_pos.y; } | |
| 310 | ||
| 311 | var new_size = { | |
| 312 | 'width': parseInt(el.offsetWidth + el.vml[z].size_offset.width), | |
| 313 | 'height': parseInt(el.offsetHeight + el.vml[z].size_offset.height) | |
| 314 | } | |
| 315 | if (el.vml[z].offsetWidth != new_size.width) { el.vml[z].style.width = new_size.width +'px'; } | |
| 316 | if (el.vml[z].offsetHeight != new_size.height) { el.vml[z].style.height = new_size.height +'px'; } | |
| 317 | } | |
| 318 | } | |
| 319 | ||
| 320 | if (event && (event.type == 'resize') && typeof(window.ieCSS3.previous_onresize) == 'function') { window.ieCSS3.previous_onresize(); } | |
| 321 | } | |
| 322 | </script> | |
| 323 | ||
