PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)


Posted in Javascript onAugust 31, 2007

PNG.JS代码:
// PNGHandler: Object-Oriented Javascript-based PNG wrapper
// --------------------------------------------------------
// Version 1.1.20031218
// Code by Scott Schiller - www.schillmania.com
// --------------------------------------------------------
// Description:
// Provides gracefully-degrading PNG functionality where
// PNG is supported natively or via filters (Damn you, IE!)
// Should work with PNGs as images and DIV background images.

function PNGHandler() {
 var self = this;

 this.na = navigator.appName.toLowerCase();
 this.nv = navigator.appVersion.toLowerCase();
 this.isIE = this.na.indexOf('internet explorer')+1?1:0;
 this.isWin = this.nv.indexOf('windows')+1?1:0;
 this.ver = this.isIE?parseFloat(this.nv.split('msie ')[1]):parseFloat(this.nv);
 this.isMac = this.nv.indexOf('mac')+1?1:0;
 this.isOpera = (navigator.userAgent.toLowerCase().indexOf('opera ')+1 || navigator.userAgent.toLowerCase().indexOf('opera/')+1);
 if (this.isOpera) this.isIE = false; // Opera filter catch (which is sneaky, pretending to be IE by default)

 this.transform = null;

 this.getElementsByClassName = function(className,oParent) {
 doc = (oParent||document);
 matches = [];
 nodes = doc.all||doc.getElementsByTagName('*');
 for (i=0; i<nodes.length; i++) {
 if (nodes[i].className == className || nodes[i].className.indexOf(className)+1 || nodes[i].className.indexOf(className+' ')+1 || nodes[i].className.indexOf(' '+className)+1) {
 matches[matches.length] = nodes[i];
 }
 }
 return matches; // kids, don't play with fire. ;)
 }

 this.filterMethod = function(oOld) {
 // IE 5.5+ proprietary filter garbage (boo!)
 // Create new element based on old one. Doesn't seem to render properly otherwise (due to filter?)
 // use proprietary "currentStyle" object, so rules inherited via CSS are picked up.

 var o = document.createElement('div'); // oOld.nodeName
 var filterID = 'DXImageTransform.Microsoft.AlphaImageLoader';
 // o.style.width = oOld.currentStyle.width;
 // o.style.height = oOld.currentStyle.height;

 if (oOld.nodeName == 'DIV') {
 var b = oOld.currentStyle.backgroundImage.toString(); // parse out background image URL
 oOld.style.backgroundImage = 'none';
 // Parse out background image URL from currentStyle object.
 var i1 = b.indexOf('url("')+5;
 var newSrc = b.substr(i1,b.length-i1-2).replace('.gif','.png'); // find first instance of ") after (", chop from string
 o = oOld;
 o.style.writingMode = 'lr-tb'; // Has to be applied so filter "has layout" and is displayed. Seriously. Refer to http://msdn.microsoft.com/workshop/author/filter/reference/filters/alphaimageloader.asp?frame=true
 o.style.filter = "progid:"+filterID+"(src='"+newSrc+"',sizingMethod='crop')";
 // Replace the old (existing) with the new (just created) element.
 // oOld.parentNode.replaceChild(o,oOld);
 } else if (oOld.nodeName == 'IMG') {
 var newSrc = oOld.getAttribute('src').replace('.gif','.png');
 // apply filter
 oOld.src = 'none.gif'; // get rid of image
 oOld.style.filter = "progid:"+filterID+"(src='"+newSrc+"',sizingMethod='crop')";
 oOld.style.writingMode = 'lr-tb'; // Has to be applied so filter "has layout" and is displayed. Seriously. Refer to http://msdn.microsoft.com/workshop/author/filter/reference/filters/alphaimageloader.asp?frame=true
 }
 }

 this.pngMethod = function(o) {
 // Native transparency support. Easy to implement. (woo!)
 bgImage = this.getBackgroundImage(o);
 if (bgImage) {
 // set background image, replacing .gif
 o.style.backgroundImage = 'url('+bgImage.replace('.gif','.png')+')';
 } else if (o.nodeName == 'IMG') {
 o.src = o.src.replace('.gif','.png');
 } else if (!this.isMac) {
 // window.status = 'PNGHandler.applyPNG(): Node is not a DIV or IMG.';
 }
 }

 this.getBackgroundImage = function(o) {
 var b, i1; // background-related variables
 var bgUrl = null;

 if (o.nodeName == 'DIV' && !(this.isIE && this.isMac)) { // ie:mac PNG support broken for DIVs with PNG backgrounds
 if (document.defaultView) {
 if (document.defaultView.getComputedStyle) {
 b = document.defaultView.getComputedStyle(o,'').getPropertyValue('background-image');
 i1 = b.indexOf('url(')+4;
 bgUrl = b.substr(i1,b.length-i1-1);
 } else {
 // no computed style
 }
 } else {
 // no default view
 }
 }
 return bgUrl;
 }

 this.supportTest = function() {
 // Determine method to use.
 // IE 5.5+/win32: filter

 if (this.isIE && this.isWin && this.ver >= 5.5) {
 // IE proprietary filter method (via DXFilter)
 self.transform = self.filterMethod;
 } else if (!this.isIE && this.ver < 5) {
 self.transform = null;
 // No PNG support or broken support
 // Leave existing content as-is
 } else if (!this.isIE && this.ver >= 5 || (this.isIE && this.isMac && this.ver >= 5)) { // version 5+ browser (not IE), or IE:mac 5+
 self.transform = self.pngMethod;
 } else {
 // Presumably no PNG support. GIF used instead.
 self.transform = null;
 return false;
 }
 return true;
 }

 this.init = function() {
 if (this.supportTest()) {
 this.elements = this.getElementsByClassName('png');
 for (var i=0; i<this.elements.length; i++) {
 this.transform(this.elements[i]);
 }
 }
 }

}

// Instantiate and initialize PNG Handler

var pngHandler = new PNGHandler();

DEMO页HTML代码:
<html>
<head>
<title>Schillmania! | png.js demo</title>
<script type="text/javascript" src="png.js"></script>
</head>

<body>

<!--

 Don't copy this part here, this is just for your information.

 // Required under the <head> tag:

 <script type="text/javascript" src="png.js"></script>

 // Required in the <body> tag:

 <img src="your-image.gif" class="png" style="width:XXXpx;height:YYYpx" />

 // ..Where XXX and YYY are the width/height of your image. Without width/height the PNG won't work under IE:win32.

 // Required before the </body> tag (but after all of your content):

 <script type="text/javascript">
 pngHandler.init();
 </script>

 // This javascript block should be put at the bottom of your page, inside the <body> and before </body>.
 // It calls the library and replaces the GIF images (if applicable) before the page has loaded (and before the GIF has loaded, So the user doesn't load 2 images for each PNG you want to replace.)
 // If you don't put it after all of your content, it may do strange things and miss some images.

-->

<h1>PNG (img)</h1>

<img src="foo.gif" alt="" class="png" style="width:220px;height:100px" />

<h1>PNG (div with background image)</h1>

<div class="png" style="width:220px;height:100px;background-image:url(foo.gif);background-repeat:no-repeat">
  
</div>

<script type="text/javascript">
 pngHandler.init();
</script>

</body>
</html>

源码及DEMO打包下载:
本地下载

Javascript 相关文章推荐
validator验证控件使用代码
Nov 23 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 Javascript
JavaScript事件类型中UI事件详解
Jan 14 Javascript
深入理解jquery跨域请求方法
May 18 Javascript
利用python分析access日志的方法
Oct 26 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
vue自定义filters过滤器
Apr 26 Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 Javascript
详解如何配置vue-cli3.0的vue.config.js
Aug 23 Javascript
js操作table中tr的顺序实现上移下移一行的效果
Nov 22 Javascript
关于Vue Router的10条高级技巧总结
May 06 Vue.js
给Javascript数组插入一条记录的代码
Aug 30 #Javascript
用javascript实现给出的盒子的序列是否可连为一矩型
Aug 30 #Javascript
Expandable &quot;Detail&quot; Table Rows
Aug 29 #Javascript
出现“不能执行已释放的Script代码”错误的原因及解决办法
Aug 29 #Javascript
推荐一些非常不错的javascript学习资源站点
Aug 29 #Javascript
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 #Javascript
找到了一篇jQuery与Prototype并存的冲突的解决方法
Aug 29 #Javascript
You might like
php代码优化及php相关问题总结
2006/10/09 PHP
php自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
PHP_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
js 弹出菜单/窗口效果
2011/10/30 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
2016/08/15 Javascript
Vuejs第十二篇之动态组件全面解析
2016/09/09 Javascript
jQuery简单倒计时效果完整示例
2016/09/20 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
Vue.js简易安装和快速入门(第二课)
2017/10/17 Javascript
layui的table中显示图片方法
2018/08/17 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
React中使用Vditor自定义图片详解
2020/12/25 Javascript
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
python如何实现视频转代码视频
2019/06/17 Python
通过实例了解python property属性
2019/11/01 Python
英国优质鞋类专家:Robinson’s Shoes
2017/12/08 全球购物
理肤泉俄罗斯官网:La Roche-Posay俄罗斯
2018/07/24 全球购物
.net软件工程师面试题
2015/03/31 面试题
自我评价200字分享
2013/12/17 职场文书
奶茶店创业计划书范文
2014/01/17 职场文书
物流业务员岗位职责
2014/02/08 职场文书
工作评语大全
2014/04/26 职场文书
2014年办公室人员工作总结
2014/12/09 职场文书
综治目标管理责任书
2015/05/11 职场文书
2015年学校减负工作总结
2015/05/19 职场文书
暂住证证明
2015/06/19 职场文书
童年读书笔记
2015/06/26 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书