您的位置：首页 > Web前端 > JavaScript

IE6-能让png图片有透明效果的js代码

2016-03-16 13:48 489 查看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>IE6-png透明度效果测试</title>
<style type='text/css'>
.bg-png{/*这是logo所在top栏的背景图片引用*/
background: url(topbarbg.jpg) no-repeat left top;
height: 80px;
position: relative;
}
/*.bg-png img{//注意这里，应用了透明度js后再这样写logo定位在IE6下没有效果，只有写行内样式到img标签中才行
position: absolute;
top: 20px;
left: 40px;
}*/
</style>
</head>
<body>

<div class="bg-png" >
<img src="logo.png" alt="" width="331" height="47" style="position:absolute;top:15px;left:40px;" />
</div>

</body>

<script type="text/javascript">
function correctPNG()//改方法会自动获取img标签里面的图片进行去背景处理，所以要注意这段js只针对img图片
{
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
}
}
}
window.attachEvent("onload", correctPNG);
</script>

</html>
上面的js代码段已封装成correctpng.js放到360云盘的IETest目录中。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航