IE浏览器PNG图片透明效果代码


Posted in Javascript onSeptember 02, 2008

首先看我们的<img>标签代码:
<img src="Example.png" border="0" alt="放大镜" />
我们将利用IE中特有的特效来满足这个要求,这就是AlphaImageLoader Filter (http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/alphaimageloader.asp)

如何做?
将下面代码保存为correctPNG.js:

function correctPNG() 
{ 
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; margin:6px; 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);

然后在你需要透明的网页中的<head>....</head>区加入:<script type="text/javascript" src="correctPNG.js"></script>

在<body>区加入多个与<img src="Example.png" border="0" alt="放大镜" />类似的PNG图片,试试看?
另一种方法:

<html> 
<head> 
<title>alpha image</title> 
<style type="text/css"> 
.pngholder{ 
width:100px; 
height:100px; 
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://3water.com/attachments/200510/03_124401_ie.png'); 
} 
.pngalpha{ 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); 
background:url(https://3water.com/attachments/200510/03_124401_ie.png) no-repeat; 
width:100px; 
height:100px; 
} 
</style> 
</head> 
<body bgcolor="#3399ff#"> 
<!- And this is your code to implement the image -> 
<div>透明</div> 
<div class="pngholder"><div class="pngalpha"></div></div> 
<div>不透明</div> 
<img src="https://3water.com/attachments/200510/03_124401_ie.png"/> 
</body> 
</html>
Javascript 相关文章推荐
实例:用 JavaScript 来操作字符串(一些字符串函数)
Feb 15 Javascript
javascript中使用css需要注意的地方小结
Sep 01 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
Apr 12 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 Javascript
自己编写的支持Ajax验证的JS表单验证插件
May 15 Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 Javascript
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
Vue 实现树形视图数据功能
May 07 Javascript
微信小程序实现页面浮动导航
Jan 28 Javascript
微信小程序纯文本实现@功能
Apr 08 Javascript
15分钟上手vue3.0(小结)
May 20 Javascript
JavaScript监测ActiveX控件是否已经安装过的代码
Sep 02 #Javascript
JQUERY CHECKBOX全选,取消全选,反选方法三
Aug 30 #Javascript
jquery复选框CHECKBOX全选、反选
Aug 30 #Javascript
JQUERY复选框CHECKBOX全选,取消全选
Aug 30 #Javascript
jquery HotKeys轻松搞定键盘事件代码
Aug 30 #Javascript
JQUERY THICKBOX弹出层插件
Aug 30 #Javascript
IE php关于强制下载文件的代码
Aug 23 #Javascript
You might like
php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
php使用变量动态创建类的对象用法示例
2017/02/06 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
JavaScript入门教程(6) Window窗口对象
2009/01/31 Javascript
js 判断 enter 事件
2009/02/12 Javascript
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
在Javascript中处理数组之toSource()方法的使用
2015/06/09 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
js全选按钮的实现方法
2015/11/17 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
js禁止浏览器的回退事件
2017/04/20 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
使用Python实现BT种子和磁力链接的相互转换
2015/11/09 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
4s店机修工岗位职责
2013/12/20 职场文书
销售工作岗位职责
2013/12/24 职场文书
高三政治教学反思
2014/02/06 职场文书
咖啡店创业计划书
2014/08/15 职场文书
党的生日演讲稿
2014/09/10 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
庆七一晚会主持词
2015/06/30 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python
详解Python中__new__方法的作用
2022/03/31 Python