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 相关文章推荐
jquery 弹出登录窗口实现代码
Dec 24 Javascript
JavaScript DOM学习第一章 W3C DOM简介
Feb 19 Javascript
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 Javascript
javascript删除字符串最后一个字符
Jan 14 Javascript
再谈javascript原型继承
Nov 10 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
Sep 17 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
Sep 28 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
Angularjs为ng-click事件传递参数
Jun 15 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 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
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
javascript开发随笔二 动态加载js和文件
2011/11/25 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
利用angularjs1.4制作的简易滑动门效果
2017/02/28 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
nodejs body-parser 解析post数据实例
2017/07/26 NodeJs
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
angularjs实现猜大小功能
2017/10/23 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
python中MethodType方法介绍与使用示例
2017/08/03 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
Python 爬虫实现增加播客访问量的方法实现
2019/10/31 Python
python实现飞行棋游戏
2020/02/05 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
餐厅采购员岗位职责
2014/03/06 职场文书
班级口号大全
2014/06/09 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
明确岗位职责
2015/02/14 职场文书
应届毕业生求职信范文
2015/03/19 职场文书
《折线统计图》教学反思
2016/02/22 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android