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 相关文章推荐
JavaScript实现禁止后退的方法
Dec 27 Javascript
javascript实现仿银行密码输入框效果的代码
Dec 13 Javascript
用jquery实现等比例缩放图片效果插件
Jul 24 Javascript
基于jquery的放大镜效果
May 30 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
javascript实现捕捉键盘上按下的键
May 05 Javascript
Vue监听数组变化源码解析
Mar 09 Javascript
Vue.js实现分页查询功能
Nov 15 Javascript
js自定义trim函数实现删除两端空格功能
Feb 09 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
vscode调试node.js的实现方法
Mar 22 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
Apr 09 Javascript
给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
JAVA/JSP学习系列之七
2006/10/09 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
设定php简写功能的方法
2019/11/28 PHP
prototype Element学习笔记(篇一)
2008/10/26 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
2013/01/23 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
javascript的动态加载、缓存、更新以及复用(一)
2014/06/09 Javascript
JS的数组迭代方法
2015/02/05 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
2016/08/15 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
js中new一个对象的过程
2017/02/20 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
vue源码入口文件分析(推荐)
2018/01/30 Javascript
详解使用Next.js构建服务端渲染应用
2018/07/10 Javascript
vue服务端渲染缓存应用详解
2018/09/12 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
python装饰器使用方法实例
2013/11/21 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
python实现五子棋小游戏
2020/03/25 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
python 爬取小说并下载的示例
2020/12/07 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
《乞巧》教学反思
2014/02/27 职场文书
《火烧云》教学反思
2014/04/12 职场文书
学生实习证明模板汇总
2014/09/25 职场文书
师德师风剖析材料
2014/09/30 职场文书
政风行风评议心得体会
2014/10/21 职场文书
化妆品促销活动总结
2015/05/07 职场文书
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript