修复png bug的脚本

简介:
代码
//  IE5.5+ PNG Alpha Fix v2.0 Alpha: Background Tiling Support
//
 (c) 2008 Angus Turnbull http://www.twinhelix.com

//  This is licensed under the GNU LGPL, version 2.1 or later.
//
 For details, see: http://creativecommons.org/licenses/LGPL/2.1/

var  IEPNGFix  =  window.IEPNGFix  ||  {};

IEPNGFix.tileBG 
=   function (elm, pngSrc, ready) {
    
//  Params: A reference to a DOM element, the PNG src file pathname, and a
     //  hidden "ready-to-run" passed when called back after image preloading.

    
var  data  =   this .data[elm.uniqueID],
        elmW 
=  Math.max(elm.clientWidth, elm.scrollWidth),
        elmH 
=  Math.max(elm.clientHeight, elm.scrollHeight),
        bgX 
=  elm.currentStyle.backgroundPositionX,
        bgY 
=  elm.currentStyle.backgroundPositionY,
        bgR 
=  elm.currentStyle.backgroundRepeat;

    
//  Cache of DIVs created per element, and image preloader/data.
     if  ( ! data.tiles) {
        data.tiles 
=  {
            elm: elm,
            src: 
'' ,
            cache: [],
            img: 
new  Image(),
            old: {}
        };
    }
    
var  tiles  =  data.tiles,
        pngW 
=  tiles.img.width,
        pngH 
=  tiles.img.height;

    
if  (pngSrc) {
        
if  ( ! ready  &&  pngSrc  !=  tiles.src) {
            
//  New image? Preload it with a callback to detect dimensions.
            tiles.img.onload  =   function () {
                
this .onload  =   null ;
                IEPNGFix.tileBG(elm, pngSrc, 
1 );
            };
            
return  tiles.img.src  =  pngSrc;
        }
    } 
else  {
        
//  No image?
         if  (tiles.src) ready  =   1 ;
        pngW 
=  pngH  =   0 ;
    }
    tiles.src 
=  pngSrc;

    
if  ( ! ready  &&  elmW  ==  tiles.old.w  &&  elmH  ==  tiles.old.h  &&
        bgX 
==  tiles.old.x  &&  bgY  ==  tiles.old.y  &&  bgR  ==  tiles.old.r) {
        
return ;
    }

    
//  Convert English and percentage positions to pixels.
     var  pos  =  {
            top: 
' 0% ' ,
            left: 
' 0% ' ,
            center: 
' 50% ' ,
            bottom: 
' 100% ' ,
            right: 
' 100% '
        },
        x,
        y,
        pc;
    x 
=  pos[bgX]  ||  bgX;
    y 
=  pos[bgY]  ||  bgY;
    
if  (pc  =  x.match( / (\d+)% / )) {
        x 
=  Math.round((elmW  -  pngW)  *  (parseInt(pc[ 1 ])  /   100 ));
    }
    
if  (pc  =  y.match( / (\d+)% / )) {
        y 
=  Math.round((elmH  -  pngH)  *  (parseInt(pc[ 1 ])  /   100 ));
    }
    x 
=  parseInt(x);
    y 
=  parseInt(y);

    
//  Handle backgroundRepeat.
     var  repeatX  =  {  ' repeat ' 1 ' repeat-x ' 1  }[bgR],
        repeatY 
=  {  ' repeat ' 1 ' repeat-y ' 1  }[bgR];
    
if  (repeatX) {
        x 
%=  pngW;
        
if  (x  >   0 ) x  -=  pngW;
    }
    
if  (repeatY) {
        y 
%=  pngH;
        
if  (y  >   0 ) y  -=  pngH;
    }

    
//  Go!
     this .hook.enabled  =   0 ;
    
if  ( ! ({ relative:  1 , absolute:  1  }[elm.currentStyle.position])) {
        elm.style.position 
=   ' relative ' ;
    }
    
var  count  =   0 ,
        xPos,
        maxX 
=  repeatX  ?  elmW : x  +   0.1 ,
        yPos,
        maxY 
=  repeatY  ?  elmH : y  +   0.1 ,
        d,
        s,
        isNew;
    
if  (pngW  &&  pngH) {
        
for  (xPos  =  x; xPos  <  maxX; xPos  +=  pngW) {
            
for  (yPos  =  y; yPos  <  maxY; yPos  +=  pngH) {
                isNew 
=   0 ;
                
if  ( ! tiles.cache[count]) {
                    tiles.cache[count] 
=  document.createElement( ' div ' );
                    isNew 
=   1 ;
                }
                
var  clipR  =  (xPos  +  pngW  >  elmW  ?  elmW  -  xPos : pngW),
                    clipB 
=  (yPos  +  pngH  >  elmH  ?  elmH  -  yPos : pngH);
                d 
=  tiles.cache[count];
                s 
=  d.style;
                s.behavior 
=   ' none ' ;
                s.left 
=  xPos  +   ' px ' ;
                s.top 
=  yPos  +   ' px ' ;
                s.width 
=  clipR  +   ' px ' ;
                s.height 
=  clipB  +   ' px ' ;
                s.clip 
=   ' rect( '   +
                    (yPos 
<   0   ?   0   -  yPos :  0 +   ' px, '   +
                    clipR 
+   ' px, '   +
                    clipB 
+   ' px, '   +
                    (xPos 
<   0   ?   0   -  xPos :  0 +   ' px) ' ;
                s.display 
=   ' block ' ;
                
if  (isNew) {
                    s.position 
=   ' absolute ' ;
                    s.zIndex 
=   - 999 ;
                    
if  (elm.firstChild) {
                        elm.insertBefore(d, elm.firstChild);
                    } 
else  {
                        elm.appendChild(d);
                    }
                }
                
this .fix(d, pngSrc,  0 );
                count
++ ;
            }
        }
    }
    
while  (count  <  tiles.cache.length) {
        
this .fix(tiles.cache[count],  '' 0 );
        tiles.cache[count
++ ].style.display  =   ' none ' ;
    }

    
this .hook.enabled  =   1 ;

    
//  Cache so updates are infrequent.
    tiles.old  =  {
        w: elmW,
        h: elmH,
        x: bgX,
        y: bgY,
        r: bgR
    };
};


IEPNGFix.update 
=   function () {
    
//  Update all PNG backgrounds.
     for  ( var  i  in  IEPNGFix.data) {
        
var  t  =  IEPNGFix.data[i].tiles;
        
if  (t  &&  t.elm  &&  t.src) {
            IEPNGFix.tileBG(t.elm, t.src);
        }
    }
};
IEPNGFix.update.timer 
=   0 ;

if  (window.attachEvent  &&   ! window.opera) {
    window.attachEvent(
' onresize ' function () {
        clearTimeout(IEPNGFix.update.timer);
        IEPNGFix.update.timer 
=  setTimeout(IEPNGFix.update,  100 );
    });
}
复制代码

 

转载请注明出处[ http://samlin.cnblogs.com/] 
作者赞赏
 


刚做的招标网: 八爪鱼招标网 请大家多意见
标签:  png

本文转自Sam Lin博客博客园博客,原文链接:http://www.cnblogs.com/samlin/archive/2010/01/11/1644273.html,如需转载请自行联系原作者
目录
相关文章
|
自然语言处理 关系型数据库 MySQL
mysql 全文搜索功能优缺点
mysql 全文搜索功能优缺点
|
12月前
|
数据采集 存储 NoSQL
提高爬虫性能的 5 个关键技巧:从并发到异步执行
本文介绍了提高网络爬虫性能的五个关键技巧:并发请求、异步执行、使用代理IP、限制请求频率与休眠时间、优化数据提取与存储。结合拼多多的实际案例,展示了如何通过这些技术优化爬虫效率,确保数据采集的高效性和稳定性。
806 0
|
消息中间件 人工智能 缓存
RocketMQ 5.0 无状态实时性消费详解
RocketMQ 5.0 无状态实时性消费详解
35590 104
|
JavaScript
汇编指令学习(JMP、JE、JS、JP,JO,JB)
汇编指令学习(JMP、JE、JS、JP,JO,JB)
973 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的社区医疗服务系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的社区医疗服务系统附带文章源码部署视频讲解等
119 0
|
Rust 安全 API
Rust学习笔记之并发(二)
Rust学习笔记之并发(二)
104 0
|
2天前
|
存储 弹性计算 人工智能
【2025云栖精华内容】 打造持续领先,全球覆盖的澎湃算力底座——通用计算产品发布与行业实践专场回顾
2025年9月24日,阿里云弹性计算团队多位产品、技术专家及服务器团队技术专家共同在【2025云栖大会】现场带来了《通用计算产品发布与行业实践》的专场论坛,本论坛聚焦弹性计算多款通用算力产品发布。同时,ECS云服务器安全能力、资源售卖模式、计算AI助手等用户体验关键环节也宣布升级,让用云更简单、更智能。海尔三翼鸟云服务负责人刘建锋先生作为特邀嘉宾,莅临现场分享了关于阿里云ECS g9i推动AIoT平台的场景落地实践。
【2025云栖精华内容】 打造持续领先,全球覆盖的澎湃算力底座——通用计算产品发布与行业实践专场回顾
|
4天前
|
云安全 数据采集 人工智能
古茗联名引爆全网,阿里云三层防护助力对抗黑产
阿里云三层校验+风险识别,为古茗每一杯奶茶保驾护航!
古茗联名引爆全网,阿里云三层防护助力对抗黑产