当前位置: 代码迷 >> Web前端 >> IE6中应用PNG, 透明
  详细解决方案

IE6中应用PNG, 透明

热度:369   发布时间:2012-07-02 17:46:22.0
IE6中使用PNG, 透明
使用方法:
<!--[if IE 6]>
<script src="js/PNG.js"></script>
<![endif]-->



第一种方法, 基于jQuery

$("img").each(function(n){
	var img = this;
	var imgName = img.src.toUpperCase();
	if (imgName.substring(imgName.length-3, imgName.length) == "PNG"){
		var imgID = (img.id) ? "id='" + img.id + "' " : "";
		var imgClass = (img.className) ? "class='" + img.className + "' " : "";
		var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";
		var imgStyle = "display:inline-block;" + img.style.cssText ;
		if (img.align == "left") imgStyle = "float:left;" + imgStyle;
		if (img.align == "right") imgStyle = "float:right;" + imgStyle;
		if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle ;
		var strNewHTML = "<span " + imgID + imgClass + imgTitle
		+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
		+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
		+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>";
		$(this).replaceWith(strNewHTML);
	}
});


第二种方法, 不用其他库, 但是效果不好

window.attachEvent("onload", function(){
	setTimeout(function(){
		for(var i=0; i<document.images.length; i++){
			var img = document.images[i]
			var imgName = img.src.toUpperCase()
			if (imgName.substring(imgName.length-3, imgName.length) == "PNG"){
				var imgID = (img.id) ? "id='" + img.id + "' " : "";
				var imgClass = (img.className) ? "class='" + img.className + "' " : "";
				var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";
				var imgStyle = "display:inline-block;" + img.style.cssText ;
				if (img.align == "left") imgStyle = "float:left;" + imgStyle;
				if (img.align == "right") imgStyle = "float:right;" + imgStyle;
				if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle;
				var strNewHTML = "<span " + imgID + imgClass + imgTitle
				+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
				+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
				+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>";
				img.outerHTML = strNewHTML;
				i = i-1;
			}
		}
	},10);
});
  相关解决方案