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 相关文章推荐
20款效果非常棒的 jQuery 插件小结分享
Nov 18 Javascript
在JS中解析HTML字符串示例代码
Apr 16 Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 Javascript
jQuery解决$符号命名冲突
Jun 18 Javascript
利用Angularjs实现幻灯片效果
Sep 07 Javascript
用move.js库实现百叶窗特效
Feb 08 Javascript
angular实现图片懒加载实例代码
Jun 08 Javascript
Nginx 配置多站点vhost 的方法
Jan 07 Javascript
JS实现DOM删除节点操作示例
Apr 04 Javascript
浅谈Node.js 沙箱环境
May 15 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 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
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
开发大型 PHP 项目的方法
2007/01/02 PHP
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
laravel请求参数校验方法
2019/10/10 PHP
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
2012/03/26 Javascript
jquery选择器原理介绍($()使用方法)
2014/03/25 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
JavaScript判断变量是否为数组的方法(Array)
2016/02/24 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
js仿支付宝多方框输入支付密码效果
2016/09/27 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
2016/11/23 Javascript
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
JS三级联动代码格式实例详解
2019/12/30 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
Python实现随机选择元素功能
2017/09/14 Python
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
Python math库 ln(x)运算的实现及原理
2019/07/17 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
中学校庆方案
2014/03/17 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
浅谈克隆 JavaScript
2021/11/02 Javascript