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 研究心得 取得属性的值
Nov 30 Javascript
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
AngularJS模块管理问题的非常规处理方法
Apr 29 Javascript
详解JavaScript中this关键字的用法
May 26 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
Jul 11 Javascript
EsLint入门学习教程
Feb 17 Javascript
js用类封装pop弹窗组件
Oct 08 Javascript
angular4中关于表单的校验示例
Oct 16 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
Jun 01 Javascript
NestJs 静态目录配置详解
Mar 12 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 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/03/29 PHP
简单PHP上传图片、删除图片实现代码
2010/05/12 PHP
用php简单实现加减乘除计算器
2014/01/06 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
在线编辑器的实现原理(兼容IE和FireFox)
2007/03/09 Javascript
jquery操作select option 的代码小结
2011/06/21 Javascript
jQuery常见开发技巧详细整理
2013/01/02 Javascript
P3P Header解决Cookie跨域的问题
2013/03/12 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
jquery阻止后续事件只执行第一个事件
2014/07/24 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
2015/02/03 Javascript
Bootstrap实现提示框和弹出框效果
2017/01/11 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
2020/09/04 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
2020/11/17 Javascript
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
Python内置函数bin() oct()等实现进制转换
2012/12/30 Python
python+Django+apache的配置方法详解
2016/06/01 Python
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
python PIL/cv2/base64相互转换实例
2020/01/09 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
软件设计的目标是什么
2016/12/04 面试题
师范大学音乐表演专业求职信
2013/10/23 职场文书
妈妈的账单教学反思
2014/02/06 职场文书
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
导游词之无锡梅园
2019/11/28 职场文书