网站地图
【www.gdgbn.com--浏览器】
png图片在火狐，谷歌等浏览器下是透明的，无论是单独图片还是作为背景。
甚至在ie7，8都是好的，唯独ie6不能让它直接透明，现在有2个网页特效的方法解决它
-->
<script >
/**
* dd_belatedpng: adds ie6 support: png images for css教程 background-image and html
* author: drew diller
* email: drew.diller@gmail.com
* url: http://www.dillerdesign.com/experiment/dd_belatedpng/
* version: 0.0.8a
* licensed under the mit license: http://dillerdesign.com/experiment/dd_belatedpng/#license
*
* example usage:
* dd_belatedpng.fix(".png_bg"); // argument is a css selector
* dd_belatedpng.fixpng( somenode ); // argument is an htmldomelement
**/
/*
please read:
absolutely everything in this script is silly. i know this. ie"s rendering of certain pixels doesn"t make sense, so neither does this code!
*/
var dd_belatedpng = {
ns: "dd_belatedpng",
imgsize: {},
delay: 10,
nodesfixed: 0,
createvmlnamespace: function () { /* enable vml */
if (document.namespaces && !document.namespaces[this.ns]) {
document.namespaces.add(this.ns, "urn:schemas-microsoft-com:vml");
}
},
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: asp教程x">http://msdn.microsoft.com/en-us/library/ms531194(vs.85).aspx
*/
var screenstylesheet, printstylesheet;
screenstylesheet = document.createelement("style");
screenstylesheet.setattribute("media", "screen");
document.documentelement.firstchild.insertbefore(screenstylesheet, document.documentelement.firstchild.firstchild);
if (screenstylesheet.stylesheet) {
screenstylesheet = screenstylesheet.stylesheet;
screenstylesheet.addrule(this.ns + ":*", "{behavior:url(#default#vml)}");
screenstylesheet.addrule(this.ns + ":shape", "position:absolute;");
screenstylesheet.addrule("img." + this.ns + "_sizefinder", "behavior:none; border:none; 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, ps教程ic.org/hendrik/">http://www.thanatopsic.org/hendrik/ */
this.screenstylesheet = screenstylesheet;
printstylesheet = document.createelement("style");
printstylesheet.setattribute("media", "print");
document.documentelement.firstchild.insertbefore(printstylesheet, document.documentelement.firstchild.firstchild);
printstylesheet = printstylesheet.stylesheet;
printstylesheet.addrule(this.ns + ":*", "{display: none !important;}");
printstylesheet.addrule("img." + this.ns + "_sizefinder", "{display: none !important;}");
}
},
readpropertychange: function () {
var el, display, v;
el = event.srcelement;
if (!el.vmlinitiated) {
return;
}
if (event.propertyname.search("background") != -1 || event.propertyname.search("border") != -1) {
dd_belatedpng.applyvml(el);
}
if (event.propertyname == "style.display") {
display = (el.currentstyle.display == "none") ? "none" : "block";
for (v in el.vml) {
if (el.vml.hasownproperty(v)) {
el.vml[v].shape.style.display = display;
}
}
}
if (event.propertyname.search("filter") != -1) {
dd_belatedpng.vmlopacity(el);
}
},
vmlopacity: function (el) {
if (el.currentstyle.filter.search("lpha") != -1) {
var trans = el.currentstyle.filter;
trans = parseint(trans.substring(trans.lastindexof("=")+1, trans.lastindexof(")")), 10)/100;
el.vml.color.shape.style.filter = el.currentstyle.filter; /* complete guesswork */
el.vml.image.fill.opacity = trans; /* complete guesswork */
}
},
handlepseudohover: function (el) {
settimeout(function () { /* wouldn"t work as intended without settimeout */
dd_belatedpng.applyvml(el);
}, 1);
},
/**
* this is the method to use in a document.
* @param {string} selector - required - a css selector, such as "#doc .container"
**/
fix: function (selector) {
if (this.screenstylesheet) {
var selectors, i;
selectors = selector.split(","); /* multiple selectors supported, no need for multiple calls to this anymore */
for (i=0; i
}
}
},
applyvml: function (el) {
el.runtimestyle.csstext = "";
this.vmlfill(el);
this.vmloffsets(el);
this.vmlopacity(el);
if (el.isimg) {
this.copyimageborders(el);
}
},
attachhandlers: function (el) {
var self, handlers, handler, moreforas, a, h;
self = this;
handlers = {resize: "vmloffsets", move: "vmloffsets"};
if (el.nodename == "a") {
moreforas = {mouseleave: "handlepseudohover", mouseenter: "handlepseudohover", focus: "handlepseudohover", blur: "handlepseudohover"};
for (a in moreforas) {
if (moreforas.hasownproperty(a)) {
handlers[a] = moreforas[a];
}
}
}
for (h in handlers) {
if (handlers.hasownproperty(h)) {
handler = function () {
self[handlers[h]](el);
};
el.attachevent("on" + h, handler);
}
}
el.attachevent("onpropertychange", this.readpropertychange);
},
givelayout: function (el) {
el.style.zoom = 1;
if (el.currentstyle.position == "static") {
el.style.position = "relative";
}
},
copyimageborders: function (el) {
var styles, s;
styles = {"borderstyle":true, "borderwidth":true, "bordercolor":true};
for (s in styles) {
if (styles.hasownproperty(s)) {
el.vml.color.shape.style[s] = el.currentstyle[s];
}
}
},
vmlfill: function (el) {
if (!el.currentstyle) {
return;
} else {
var elstyle, noimg, lib, v, img, imgloaded;
elstyle = el.currentstyle;
}
for (v in el.vml) {
if (el.vml.hasownproperty(v)) {
el.vml[v].shape.style.zindex = elstyle.zindex;
}
}
el.runtimestyle.backgroundcolor = "";
el.runtimestyle.backgroundimage = "";
noimg = true;
if (elstyle.backgroundimage != "none" || el.isimg) {
if (!el.isimg) {
el.vmlbg = elstyle.backgroundimage;
el.vmlbg = el.vmlbg.substr(5, el.vmlbg.lastindexof("")")-5);
}
else {
el.vmlbg = el.src;
}
lib = this;
if (!lib.imgsize[el.vmlbg]) { /* determine size of loaded image */
img = document.createelement("img");
lib.imgsize[el.vmlbg] = img;
img.classname = lib.ns + "_sizefinder";
img.runtimestyle.csstext = "behavior:none; position:absolute; left:-10000px; top:-10000px; border:none; margin:0; padding:0;"; /* make sure to set behavior to none to prevent accidental matching of the helper elements! */
imgloaded = function () {
this.width = this.offsetwidth; /* weird cache-busting requirement! */
this.height = this.offsetheight;
lib.vmloffsets(el);
};
img.attachevent("onload", imgloaded);
img.src = el.vmlbg;
img.removeattribute("width");
img.removeattribute("height");
document.body.insertbefore(img, document.body.firstchild);
}
el.vml.image.fill.src = el.vmlbg;
noimg = false;
}
el.vml.image.fill.on = !noimg;
el.vml.image.fill.color = "none";
el.vml.color.shape.style.backgroundcolor = elstyle.backgroundcolor;
el.runtimestyle.backgroundimage = "none";
el.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 */
vmloffsets: function (el) {
var thisstyle, size, fudge, makevisible, bg, bgr, dc, altc, b, c, v;
thisstyle = el.currentstyle;
size = {"w":el.clientwidth+1, "h":el.clientheight+1, "w":this.imgsize[el.vmlbg].width, "h":this.imgsize[el.vmlbg].height, "l":el.offsetleft, "t":el.offsettop, "blw":el.clientleft, "btw":el.clienttop};
fudge = (size.l + size.blw == 1) ? 1 : 0;
/* vml shape, left, top, width, height, origin */
makevisible = function (vml, l, t, w, h, o) {
vml.coordsize = w+","+h;
vml.coordorigin = o+","+o;
vml.path = "m0,0l"+w+",0l"+w+","+h+"l0,"+h+" xe";
vml.style.width = w + "px";
vml.style.height = h + "px";
vml.style.left = l + "px";
vml.style.top = t + "px";
};
makevisible(el.vml.color.shape, (size.l + (el.isimg ? 0 : size.blw)), (size.t + (el.isimg ? 0 : size.btw)), (size.w-1), (size.h-1), 0);
makevisible(el.vml.image.shape, (size.l + size.blw), (size.t + size.btw), (size.w), (size.h), 1 );
bg = {"x":0, "y":0};
if (el.isimg) {
bg.x = parseint(thisstyle.paddingleft, 10) + 1;
bg.y = parseint(thisstyle.paddingtop, 10) + 1;
}
else {
for (b in bg) {
if (bg.hasownproperty(b)) {
this.figurepercentage(bg, size, b, thisstyle["backgroundposition"+b]);
}
}
}
el.vml.image.fill.position = (bg.x/size.w) + "," + (bg.y/size.h);
bgr = thisstyle.backgroundrepeat;
dc = {"t":1, "r":size.w+fudge, "b":size.h, "l":1+fudge}; /* these are defaults for repeat of any kind */
altc = { "x": {"b1": "l", "b2": "r", "d": "w"}, "y": {"b1": "t", "b2": "b", "d": "h"} };
if (bgr != "repeat" || el.isimg) {
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 */
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;
}
el.vml.image.shape.style.clip = "rect("+c.t+"px "+(c.r+fudge)+"px "+c.b+"px "+(c.l+fudge)+"px)";
}
else {
el.vml.image.shape.style.clip = "rect("+dc.t+"px "+dc.r+"px "+dc.b+"px "+dc.l+"px)";
}
},
figurepercentage: function (bg, size, axis, position) {
var horizontal, fraction;
fraction = true;
horizontal = (axis == "x");
switch(position) {
case "left":
case "top":
bg[axis] = 0;
break;
case "center":
bg[axis] = 0.5;
break;
case "right":
case "bottom":
bg[axis] = 1;
break;
default:
if (position.search("%") != -1) {
bg[axis] = parseint(position, 10) / 100;
}
else {
fraction = false;
}
}
bg[axis] = math.ceil( fraction ? ( (size[horizontal?"w": "h"] * bg[axis]) - (size[horizontal?"w": "h"] * bg[axis]) ) : parseint(position, 10) );
if (bg[axis] % 2 === 0) {
bg[axis]++;
}
return bg[axis];
},
fixpng: function (el) {
el.style.behavior = "none";
var lib, els, nodestr, v, e;
if (el.nodename == "body" || el.nodename == "td" || el.nodename == "tr") { /* elements not supported yet */
return;
}
el.isimg = false;
if (el.nodename == "img") {
if(el.src.tolowercase().search(/.png$/) != -1) {
el.isimg = true;
el.style.visibility = "hidden";
}
else {
return;
}
}
else if (el.currentstyle.backgroundimage.tolowercase().search(".png") == -1) {
return;
}
lib = dd_belatedpng;
el.vml = {color: {}, image: {}};
els = {shape: {}, fill: {}};
for (v in el.vml) {
if (el.vml.hasownproperty(v)) {
for (e in els) {
if (els.hasownproperty(e)) {
nodestr = lib.ns + ":" + e;
el.vml[v][e] = document.createelement(nodestr);
}
}
el.vml[v].shape.stroked = false;
el.vml[v].shape.appendchild(el.vml[v].fill);
el.parentnode.insertbefore(el.vml[v].shape, el);
}
}
el.vml.image.shape.fillcolor = "none"; /* don"t show blank white shapeangle when waiting for image to load. */
el.vml.image.fill.type = "tile"; /* makes image show up. */
el.vml.color.fill.on = false; /* actually going to apply vml element"s style.backgroundcolor, so hide the whiteness. */
lib.attachhandlers(el);
lib.givelayout(el);
lib.givelayout(el.offsetparent);
el.vmlinitiated = true;
lib.applyvml(el); /* render! */
}
};
try {
document.execcommand("backgroundimagecache", false, true); /* tredosoft multiple ie doesn"t like this, so try{} it */
} catch(r) {}
dd_belatedpng.createvmlnamespace();
dd_belatedpng.createvmlstylesheet();
</script>
<script>
dd_belatedpng.fix(".m_title,.left em,.key em,.ss,"); //要透明样式名
</script>
这里面png透明图片就行了。
下面还有二款
<script type="text/javascript">
function dopng(img) {
if(navigator.useragent.indexof("msie 6.0") > 0) {
img.runtimestyle.backgroundimage = "none", img.runtimestyle.filter = "progid:dximagetransform.microsoft.alphaimageloader(src="" + img.src + "", sizingmethod="image")", img.src = "transparent.gif";
}
}
</script>
第二种：
<script type="text/javascript">
function fixpng(myimage) {
if(navigator.useragent.indexof("msie 6.0") > 0) {
var strnewhtml = "
+ (myimage.id ? " id="" + myimage.id + """ : "")
+ (myimage.classname ? " class="" + myimage.classname + """ : "")
+ (myimage.title ? " title="" + myimage.title + """ : "title="" + myimage.alt + """)
+ " style="display:inline-block;"
+ " width:" + myimage.width + "px;"
+ " height:" + myimage.height + "px;"
+ " filter:progid:dximagetransform.microsoft.alphaimageloader(src="" + myimage.src + "", sizingmethod="scale");"
+ " " + myimage.style.csstext + ";""
+ ">";
myimage.outerhtml = strnewhtml;
}
}
</script>
后2个方法传入的参数都是图片dom节点对象，其中第一种注意需要一张额外的1*1透明transparent.gif来配合