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 相关文章推荐
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
使用jQuery操作Cookies的实现代码
Oct 09 Javascript
js的flv视频播放器插件使用方法
Jun 23 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
May 02 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
深入Vue-Router路由嵌套理解
Aug 13 Javascript
vue-cli3单页构建大型项目方案
Apr 07 Javascript
JavaScript数组排序功能简单实现
May 14 Javascript
node+vue实现文件上传功能
May 28 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无敌近乎加密方式!
2010/07/17 PHP
PHP面向对象法则
2012/02/23 PHP
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
使用php清除bom示例
2014/03/03 PHP
php实现水仙花数的4个示例分享
2014/04/08 PHP
CI框架中类的自动加载问题分析
2016/11/21 PHP
PHP实现的简单操作SQLite数据库类与用法示例
2017/06/19 PHP
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
2013/09/23 Javascript
jQuery插件slider实现拖动滑块选取价格范围
2015/04/30 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
深入探讨javascript函数式编程
2015/10/11 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
ajax在兼容模式下失效的快速解决方法
2016/03/22 Javascript
jquery animate动画持续运动的实例
2017/11/29 jQuery
vue在线动态切换主题色方案
2020/03/26 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
jQuery实现评论模块
2020/08/19 jQuery
JS+CSS实现过渡特效
2021/01/02 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
美国女士泳装店:Swimsuits For All
2017/03/02 全球购物
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
KIEHL’S科颜氏官方旗舰店:源自美国的顶级护肤品牌
2018/06/07 全球购物
eBay美国官网:eBay.com
2020/10/24 全球购物
大学生入党思想汇报
2014/01/01 职场文书
《鸟的天堂》教学反思
2014/02/27 职场文书
校庆活动策划方案
2014/06/05 职场文书
商铺门前三包责任书
2014/07/25 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
读书笔记怎么写
2015/07/01 职场文书
认识实习感想
2015/08/10 职场文书
庭外和解协议书
2016/03/23 职场文书
2019年最新感恩节祝福语(28句)
2019/11/27 职场文书