www.gusucode.com > 4016网博士成品网站管理系统 PHP网站源码程序 > 4016/4016/diy/js/DD_belatedPNG.js
/** * DD_belatedPNG: Adds IE6 support: PNG images for CSS background-image and HTML <IMG/>. * Author: Drew Diller * Email: drew.diller@gmail.com * URL: http://www.dillerdesign.com/experiment/DD_belatedPNG/ * Version: 0.0.6a * Licensed under the MIT License: http://dillerdesign.com/experiment/DD_belatedPNG/#license * * Example usage: * DD_belatedPNG.fix('.png_bg'); // argument is a CSS selector **/ var DD_belatedPNG = { ns: 'DD_belatedPNG', createVmlNameSpace: function() { /* enable VML */ if (document.namespaces && !document.namespaces[this.ns]) { document.namespaces.add(this.ns, 'urn:schemas-microsoft-com:vml'); } if (window.attachEvent) { window.attachEvent('onbeforeunload', function() { DD_belatedPNG = null; }); } }, createVmlStyleSheet: function() { /* style VML, enable behaviors */ /* Just in case lots of other developers have added lots of other stylesheets using document.createStyleSheet and hit the 31-limit mark, let's not use that method! further reading: http://msdn.microsoft.com/en-us/library/ms531194(VS.85).aspx */ var style = document.createElement('style'); document.documentElement.firstChild.insertBefore(style, document.documentElement.firstChild.firstChild); var styleSheet = style.styleSheet; styleSheet.addRule(this.ns + '\\:*', '{behavior:url(#default#VML)}'); styleSheet.addRule(this.ns + '\\:rect', 'position:absolute;'); styleSheet.addRule('img.' + this.ns + '_sizeFinder', 'position:absolute; z-index:-1; top:-10000px; visibility:hidden;'); /* large negative top value for avoiding vertical scrollbars for large images, suggested by James O'Brien, http://www.thanatopsic.org/hendrik/ */ this.styleSheet = styleSheet; }, interceptPropertyChanges: function() { var el = event.srcElement; if (event.propertyName.search('background') != -1) { el.runtimeStyle.cssText = ''; DD_belatedPNG.updateVmlFill.call(el); } }, handlePseudoHover: function(el) { var self = this; setTimeout(function() { /* wouldn't work as intended without setTimeout */ self.runtimeStyle.backgroundColor = ''; self.runtimeStyle.backgroundImage = ''; DD_belatedPNG.updateVmlFill.call(self); }, 1); }, /** * This is the method to use in a document. * @param {String} selector - REQUIRED - a CSS selector, such as '#doc .container' **/ fix: function(selector) { var selectors = selector.split(','); /* multiple selectors supported, no need for multiple calls to this anymore */ for (var i=0; i<selectors.length; i++) { this.styleSheet.addRule(selectors[i], 'behavior:expression(DD_belatedPNG.fixPng.call(this))'); /* seems to execute the function without adding it to the stylesheet - interesting... */ } }, fixPng: function(isImg) { this.style.behavior = 'none'; if (this.nodeName == 'BODY' || this.nodeName == 'TD' || this.nodeName == 'TR') { /* elements not supported yet */ return; } var self = this; var lib = DD_belatedPNG; this.isImg = isImg; if (this.nodeName == 'IMG') { var thisStyle = this.currentStyle; this.width = this.clientWidth; this.height = this.clientHeight; this.borderRect = document.createElement('div'); var styles = {'backgroundColor':true, 'borderStyle':true, 'borderWidth':true, 'borderColor':true, 'display':true, 'verticalAlign':true, 'width':true, 'height':true, 'zIndex':true}; for (var s in styles) { this.borderRect.style[s] = thisStyle[s]; } this.parentNode.style.zoom = 1; this.borderRect.style.backgroundImage = 'url(' + this.src + ')'; this.borderRect.style.backgroundRepeat = 'no-repeat'; this.borderRect.style.backgroundPosition = 'center center'; this.borderRect.style.position = 'absolute'; this.borderRect.style.left = this.offsetLeft; this.borderRect.style.top = this.offsetTop+'px'; this.parentNode.insertBefore(this.borderRect, this); DD_belatedPNG.fixPng.call(this.borderRect, true); this.style.visibility = 'hidden'; return; } this.bgSizeFinder = document.createElement('img'); this.bgSizeFinder.className = lib.ns + '_sizeFinder'; this.bgSizeFinder.attachEvent('onload', function() { lib.updateVmlDimensions.call(self); }); document.body.insertBefore(this.bgSizeFinder, document.body.firstChild); this.imgRect = document.createElement(lib.ns + ':rect'); this.imgFill = document.createElement(lib.ns + ':fill'); this.colorRect = document.createElement(lib.ns + ':rect'); this.rects = [this.imgRect, this.colorRect]; for (var r=0; r<2; r++) { this.rects[r].stroked = false; } this.parentNode.insertBefore(this.colorRect, this); this.imgRect.appendChild(this.imgFill); this.parentNode.insertBefore(this.imgRect, this); /* attach handlers */ var handlers = {'resize': 'updateVmlDimensions', 'move': 'updateVmlDimensions'}; if (this.nodeName == 'A') { var moreForAs = {'mouseleave': 'handlePseudoHover', 'mouseenter': 'handlePseudoHover', 'focus': 'handlePseudoHover', 'blur': 'handlePseudoHover'}; for (var a in moreForAs) { handlers[a] = moreForAs[a]; } } for (var h in handlers) { this.attachEvent('on' + h, function() { lib[handlers[h]].call(self); }); } this.attachEvent('onpropertychange', lib.interceptPropertyChanges); /* set up element */ setTimeout(function() { lib.updateVmlFill.call(self); }, 1); }, updateVmlFill: function() { var thisStyle = this.currentStyle; if (thisStyle.backgroundImage) { this.colorRect.style.zIndex = thisStyle.zIndex; this.imgRect.style.zIndex = thisStyle.zIndex; var giveLayout = function(el) { el.style.zoom = 1; if (el.currentStyle.position == 'static') { el.style.position = 'relative'; } }; giveLayout(this); giveLayout(this.parentNode); var bg = thisStyle.backgroundImage; bg = bg.split('"')[1]; } if (this.src) { var bg = this.src; } if (thisStyle.backgroundImage || this.src) { this.bgSizeFinder.src = bg; this.imgFill.src = bg; this.imgFill.type = 'tile'; } this.colorRect.filled = (thisStyle.backgroundColor != 'transparent'); this.colorRect.fillColor = thisStyle.backgroundColor; this.runtimeStyle.backgroundImage = 'none'; this.runtimeStyle.backgroundColor = 'transparent'; }, /* IE can't figure out what do when the offsetLeft and the clientLeft add up to 1, and the VML ends up getting fuzzy... so we have to push/enlarge things by 1 pixel and then clip off the excess */ updateVmlDimensions: function() { var thisStyle = this.currentStyle; var size = {'W':this.clientWidth+1, 'H':this.clientHeight+1, 'w':this.bgSizeFinder.width, 'h':this.bgSizeFinder.height, 'L':this.offsetLeft, 'T':this.offsetTop, 'bLW':this.clientLeft, 'bTW':this.clientTop}; var fudge = (size.L + size.bLW == 1) ? 1 : 0; if (size.W >= document.body.clientWidth) { size.W = document.body.clientWidth - 1; } for (var r=0; r<2; r++) { this.rects[r].style.width = size.W + 'px'; this.rects[r].style.height = size.H + 'px'; this.rects[r].style.left = (size.L + size.bLW - 1) + 'px'; this.rects[r].style.top = (size.T + size.bTW - 1) + 'px'; } var bg = {'X':0, 'Y':0}; var figurePercentage = function(axis, position) { var fraction = true; switch(position) { case 'left': case 'top': bg[axis] = 0; break; case 'center': bg[axis] = .5; break; case 'right': case 'bottom': bg[axis] = 1; break; default: if (position.search('%') != -1) { bg[axis] = parseInt(position)*.01; } else { fraction = false; } } var horz = (axis == 'X'); bg[axis] = Math.ceil(fraction ? ( (size[horz?'W': 'H'] * bg[axis]) - (size[horz?'w': 'h'] * bg[axis]) ) : parseInt(position)); if (bg[axis] == 0) { bg[axis] = 1; } }; for (var b in bg) { figurePercentage(b, thisStyle['backgroundPosition'+b]); } this.imgFill.position = (bg.X/size.W) + ',' + (bg.Y/size.H); var bgR = thisStyle.backgroundRepeat; var dC = {'T':1, 'R':size.W+fudge, 'B':size.H, 'L':1+fudge}; /* these are defaults for repeat of any kind */ var altC = { 'X': {'b1': 'L', 'b2': 'R', 'd': 'W'}, 'Y': {'b1': 'T', 'b2': 'B', 'd': 'H'} }; if (bgR != 'repeat') { var c = {'T':(bg.Y), 'R':(bg.X+size.w), 'B':(bg.Y+size.h), 'L':(bg.X)}; /* these are defaults for no-repeat - clips down to the image location */ if (bgR.search('repeat-') != -1) { /* now let's revert to dC for repeat-x or repeat-y */ var v = bgR.split('repeat-')[1].toUpperCase(); c[altC[v].b1] = 1; c[altC[v].b2] = size[altC[v].d]; } if (c.B > size.H) { c.B = size.H; } this.imgRect.style.clip = 'rect('+c.T+'px '+(c.R+fudge)+'px '+c.B+'px '+(c.L+fudge)+'px)'; } else { this.imgRect.style.clip = 'rect('+dC.T+'px '+dC.R+'px '+dC.B+'px '+dC.L+'px)'; } if (this.isImg) { dC.R++; dC.B++; } this.colorRect.style.clip = 'rect('+dC.T+'px '+dC.R+'px '+dC.B+'px '+dC.L+'px)'; } }; DD_belatedPNG.createVmlNameSpace(); DD_belatedPNG.createVmlStyleSheet();