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 相关文章推荐
jquery 设置style:display的方法
Jan 29 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 Javascript
jQuery实现简单下拉导航效果
Sep 07 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 Javascript
基于JavaScript实现树形下拉框
Aug 10 Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 Javascript
js使用cookie实现记住用户名功能示例
Jun 13 Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 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
Smarty模板快速入门
2007/01/04 PHP
网友原创的PHP模板类代码
2008/09/07 PHP
php escape URL编码
2008/12/10 PHP
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
php集成环境xampp中apache无法启动问题解决方案
2014/11/18 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
php实现往pdf中加数字签名操作示例【附源码下载】
2018/08/07 PHP
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
用Jquery实现多级下拉框无刷新的联动
2010/12/22 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
js格式化输入框内金额、银行卡号
2016/02/01 Javascript
总结AngularJS开发者最常犯的十个错误
2016/08/31 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
你有必要知道的10个JavaScript难点
2017/07/25 Javascript
easyui-datagrid开发实践(总结)
2017/08/02 Javascript
解决easyui日期时间框ie的兼容的问题
2018/03/01 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式
2015/12/28 DOTA
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
程序设计HTML5 Canvas API
2013/04/08 HTML / CSS
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
中间件分为哪几类
2016/09/18 面试题
秘书英文求职信范文
2014/01/31 职场文书
蟋蟀的住宅教学反思
2014/04/26 职场文书
法学专业毕业生求职信
2014/06/12 职场文书
黄山导游词
2015/01/31 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书