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 相关文章推荐
关于文本限制字数的js代码
Apr 02 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
Nov 14 Javascript
纯js实现背景图片切换效果代码
Nov 14 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
Jan 06 Javascript
javascript 随机展示头像实现代码
Dec 06 Javascript
jquery鼠标停止移动事件
Dec 21 Javascript
jQuery中:focus选择器用法实例
Dec 30 Javascript
判断数组是否包含某个元素的js函数实现方法
May 19 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 Javascript
基于node简单实现RSA加解密的方法步骤
Mar 21 Javascript
react 生命周期实例分析
May 18 Javascript
JavaScript中10个Reduce常用场景技巧
Jun 21 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 XML error parsing SOAP payload on line 1
2010/06/17 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
js 获取Listbox选择的值的代码
2010/04/15 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
2014/09/21 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
2019/10/16 Javascript
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
python实现感知器
2017/12/19 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
Python多分支if语句的使用
2020/09/03 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
HTML5打开手机扫码功能及优缺点
2017/11/27 HTML / CSS
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
十八届三中全会感言
2014/03/10 职场文书
广播体操比赛口号
2014/06/10 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL
Mysql中调试存储过程最简单的方法
2021/06/30 MySQL
Oracle中update和select 关联操作
2022/01/18 Oracle
Golang 实现WebSockets
2022/04/24 Golang