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 相关文章推荐
JavaScript 对象成员的可见性说明
Oct 16 Javascript
JQuery 选择和过滤方法代码总结
Nov 19 Javascript
25个非常棒的jQuery滑块插件和教程小结
Sep 02 Javascript
javascript限制文本框输入值类型的方法
May 07 Javascript
TypeScript 学习笔记之基本类型
Jun 19 Javascript
利用JQuery写一个简单的异步分页插件
Mar 07 Javascript
JavaScript获取服务器端时间的方法
Nov 29 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
Apr 27 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 Javascript
解决JS表单验证只有第一个IF起作用的问题
Dec 04 Javascript
Vue使用v-viewer实现图片预览
Oct 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
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
js改变文章字体大小的实例代码
2013/11/27 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
jQuery使用deferreds串行多个ajax请求
2016/08/22 Javascript
浅谈JavaScript的闭包函数
2016/12/08 Javascript
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
webpack4.x打包过程详解
2018/07/18 Javascript
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
Vue-cli@3.0 插件系统简析
2018/09/05 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
2018/09/18 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
总结Python中逻辑运算符的使用
2015/05/13 Python
pyqt5自定义信号实例解析
2018/01/31 Python
Python遍历某目录下的所有文件夹与文件路径
2018/03/15 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
tensorflow 大于某个值为1,小于为0的实例
2020/06/30 Python
Python修改DBF文件指定列
2020/12/19 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
在什么时候需要使用"常引用"
2015/12/31 面试题
美丽家庭事迹材料
2014/05/03 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
商务宴请邀请函范文
2015/02/02 职场文书
抢劫罪辩护词
2015/05/21 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书