IE6兼容png图片

news/2024/7/6 6:33:48
<!--[if IE 6]>
<script src="/js/DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('img,a.opt,.png_bg');
</script>
<![endif]-->
DD_belatedPNG.js源码
/**
* DD_belatedPNG: Adds IE6 support: PNG images for CSS background-image and HTML <IMG/>.
* Author: Drew Diller
* Email: drew.diller@gmail.com
* URL: http://www.dillerdesign.com/experiment/DD_belatedPNG/
* Version: 0.0.8a
* Licensed under the MIT License: http://dillerdesign.com/experiment/DD_belatedPNG/#license
*
* Example usage:
* DD_belatedPNG.fix('.png_bg'); // argument is a CSS selector
* DD_belatedPNG.fixPng( someNode ); // argument is an HTMLDomElement
**/
var DD_belatedPNG={ns:"DD_belatedPNG",imgSize:{},delay:10,nodesFixed:0,createVmlNameSpace:function(){if(document.namespaces&&!document.namespaces[this.ns]){document.namespaces.add(this.ns,"urn:schemas-microsoft-com:vml")}},createVmlStyleSheet:function(){var b,a;b=document.createElement("style");b.setAttribute("media","screen");document.documentElement.firstChild.insertBefore(b,document.documentElement.firstChild.firstChild);if(b.styleSheet){b=b.styleSheet;b.addRule(this.ns "\\:*","{behavior:url(#default#VML)}");b.addRule(this.ns "\\:shape","position:absolute;");b.addRule("img." this.ns "_sizeFinder","behavior:none; border:none; position:absolute; z-index:-1; top:-10000px; visibility:hidden;");this.screenStyleSheet=b;a=document.createElement("style");a.setAttribute("media","print");document.documentElement.firstChild.insertBefore(a,document.documentElement.firstChild.firstChild);a=a.styleSheet;a.addRule(this.ns "\\:*","{display: none !important;}");a.addRule("img." this.ns "_sizeFinder","{display: none !important;}")}},readPropertyChange:function(){var b,c,a;b=event.srcElement;if(!b.vmlInitiated){return}if(event.propertyName.search("background")!=-1||event.propertyName.search("border")!=-1){DD_belatedPNG.applyVML(b)}if(event.propertyName=="style.display"){c=(b.currentStyle.display=="none")?"none":"block";for(a in b.vml){if(b.vml.hasOwnProperty(a)){b.vml[a].shape.style.display=c}}}if(event.propertyName.search("filter")!=-1){DD_belatedPNG.vmlOpacity(b)}},vmlOpacity:function(b){if(b.currentStyle.filter.search("lpha")!=-1){var a=b.currentStyle.filter;a=parseInt(a.substring(a.lastIndexOf("=") 1,a.lastIndexOf(")")),10)/100;b.vml.color.shape.style.filter=b.currentStyle.filter;b.vml.image.fill.opacity=a}},handlePseudoHover:function(a){setTimeout(function(){DD_belatedPNG.applyVML(a)},1)},fix:function(a){if(this.screenStyleSheet){var c,b;c=a.split(",");for(b=0;b<c.length;b  ){this.screenStyleSheet.addRule(c[b],"behavior:expression(DD_belatedPNG.fixPng(this))")}}},applyVML:function(a){a.runtimeStyle.cssText="";this.vmlFill(a);this.vmlOffsets(a);this.vmlOpacity(a);if(a.isImg){this.copyImageBorders(a)}},attachHandlers:function(i){var d,c,g,e,b,f;d=this;c={resize:"vmlOffsets",move:"vmlOffsets"};if(i.nodeName=="A"){e={mouseleave:"handlePseudoHover",mouseenter:"handlePseudoHover",focus:"handlePseudoHover",blur:"handlePseudoHover"};for(b in e){if(e.hasOwnProperty(b)){c[b]=e[b]}}}for(f in c){if(c.hasOwnProperty(f)){g=function(){d[c[f]](i)};i.attachEvent("on" f,g)}}i.attachEvent("onpropertychange",this.readPropertyChange)},giveLayout:function(a){a.style.zoom=1;if(a.currentStyle.position=="static"){a.style.position="relative"}},copyImageBorders:function(b){var c,a;c={borderStyle:true,borderWidth:true,borderColor:true};for(a in c){if(c.hasOwnProperty(a)){b.vml.color.shape.style[a]=b.currentStyle[a]}}},vmlFill:function(e){if(!e.currentStyle){return}else{var d,f,g,b,a,c;d=e.currentStyle}for(b in e.vml){if(e.vml.hasOwnProperty(b)){e.vml[b].shape.style.zIndex=d.zIndex}}e.runtimeStyle.backgroundColor="";e.runtimeStyle.backgroundImage="";f=true;if(d.backgroundImage!="none"||e.isImg){if(!e.isImg){e.vmlBg=d.backgroundImage;e.vmlBg=e.vmlBg.substr(5,e.vmlBg.lastIndexOf('")')-5)}else{e.vmlBg=e.src}g=this;if(!g.imgSize[e.vmlBg]){a=document.createElement("img");g.imgSize[e.vmlBg]=a;a.className=g.ns "_sizeFinder";a.runtimeStyle.cssText="behavior:none; position:absolute; left:-10000px; top:-10000px; border:none; margin:0; padding:0;";c=function(){this.width=this.offsetWidth;this.height=this.offsetHeight;g.vmlOffsets(e)};a.attachEvent("onload",c);a.src=e.vmlBg;a.removeAttribute("width");a.removeAttribute("height");document.body.insertBefore(a,document.body.firstChild)}e.vml.image.fill.src=e.vmlBg;f=false}e.vml.image.fill.on=!f;e.vml.image.fill.color="none";e.vml.color.shape.style.backgroundColor=d.backgroundColor;e.runtimeStyle.backgroundImage="none";e.runtimeStyle.backgroundColor="transparent"},vmlOffsets:function(d){var h,n,a,e,g,m,f,l,j,i,k;h=d.currentStyle;n={W:d.clientWidth 1,H:d.clientHeight 1,w:this.imgSize[d.vmlBg].width,h:this.imgSize[d.vmlBg].height,L:d.offsetLeft,T:d.offsetTop,bLW:d.clientLeft,bTW:d.clientTop};a=(n.L n.bLW==1)?1:0;e=function(b,p,q,c,s,u){b.coordsize=c "," s;b.coordorigin=u "," u;b.path="m0,0l" c ",0l" c "," s "l0," s " xe";b.style.width=c "px";b.style.height=s "px";b.style.left=p "px";b.style.top=q "px"};e(d.vml.color.shape,(n.L (d.isImg?0:n.bLW)),(n.T (d.isImg?0:n.bTW)),(n.W-1),(n.H-1),0);e(d.vml.image.shape,(n.L n.bLW),(n.T n.bTW),(n.W),(n.H),1);g={X:0,Y:0};if(d.isImg){g.X=parseInt(h.paddingLeft,10) 1;g.Y=parseInt(h.paddingTop,10) 1}else{for(j in g){if(g.hasOwnProperty(j)){this.figurePercentage(g,n,j,h["backgroundPosition" j])}}}d.vml.image.fill.position=(g.X/n.W) "," (g.Y/n.H);m=h.backgroundRepeat;f={T:1,R:n.W a,B:n.H,L:1 a};l={X:{b1:"L",b2:"R",d:"W"},Y:{b1:"T",b2:"B",d:"H"}};if(m!="repeat"||d.isImg){i={T:(g.Y),R:(g.X n.w),B:(g.Y n.h),L:(g.X)};if(m.search("repeat-")!=-1){k=m.split("repeat-")[1].toUpperCase();i[l[k].b1]=1;i[l[k].b2]=n[l[k].d]}if(i.B>n.H){i.B=n.H}d.vml.image.shape.style.clip="rect(" i.T "px " (i.R a) "px " i.B "px " (i.L a) "px)"}else{d.vml.image.shape.style.clip="rect(" f.T "px " f.R "px " f.B "px " f.L "px)"}},figurePercentage:function(d,c,f,a){var b,e;e=true;b=(f=="X");switch(a){case"left":case"top":d[f]=0;break;case"center":d[f]=0.5;break;case"right":case"bottom":d[f]=1;break;default:if(a.search("%")!=-1){d[f]=parseInt(a,10)/100}else{e=false}}d[f]=Math.ceil(e?((c[b?"W":"H"]*d[f])-(c[b?"w":"h"]*d[f])):parseInt(a,10));if(d[f]%2===0){d[f]  }return d[f]},fixPng:function(c){c.style.behavior="none";var g,b,f,a,d;if(c.nodeName=="BODY"||c.nodeName=="TD"||c.nodeName=="TR"){return}c.isImg=false;if(c.nodeName=="IMG"){if(c.src.toLowerCase().search(/\.png$/)!=-1){c.isImg=true;c.style.visibility="hidden"}else{return}}else{if(c.currentStyle.backgroundImage.toLowerCase().search(".png")==-1){return}}g=DD_belatedPNG;c.vml={color:{},image:{}};b={shape:{},fill:{}};for(a in c.vml){if(c.vml.hasOwnProperty(a)){for(d in b){if(b.hasOwnProperty(d)){f=g.ns ":" d;c.vml[a][d]=document.createElement(f)}}c.vml[a].shape.stroked=false;c.vml[a].shape.appendChild(c.vml[a].fill);c.parentNode.insertBefore(c.vml[a].shape,c)}}c.vml.image.shape.fillcolor="none";c.vml.image.fill.type="tile";c.vml.color.fill.on=false;g.attachHandlers(c);g.giveLayout(c);g.giveLayout(c.offsetParent);c.vmlInitiated=true;g.applyVML(c)}};try{document.execCommand("BackgroundImageCache",false,true)}catch(r){}DD_belatedPNG.createVmlNameSpace();DD_belatedPNG.createVmlStyleSheet();

 


http://www.niftyadmin.cn/n/1733096.html

相关文章

[从jQuery看JavaScript]-JavaScript

http://blog.csdn.net/natineprince/archive/2009/10/31/4751609.aspx什么是JavaScript&#xff1f;相信随便百度Google一下都能找到一大堆的定义解释。而在我的理解中&#xff0c;JavaScript就是一种客户端的脚本 语言&#xff0c;用于处理页面数据逻辑和用户体验&#xff08;…

海康威视客户端iVMS-4200连接NVR

海康威视客户端iVMS-4200连接NVR 陈拓 2021/07/30-2021/08/01 1. 概述 iVMS-4200客户端是一款与网络监控设备配套使用的综合应用软件&#xff0c;可满足用户多方面需求&#xff0c;如设备管理、人员管理、考勤、可视对讲、数据分析、远程设备配置等。客户端可与DVR、NVR、IPC…

海康威视SDK实例QtDemo显示NVR视频窗口(Linux+Qt)

海康威视SDK实例QtDemo显示NVR视频窗口(LinuxQt) 陈拓 2021/07/312021/08/01 1. 概述 在《海康威视客户端iVMS-4200连接NVR》 https://zhuanlan.zhihu.com/p/395137370 https://blog.csdn.net/chentuo2000/article/details/119298486 一文中我们通过海康威视客户端iVMS-42…

Ubuntu 18.04安装远程桌面

Ubuntu 18.04安装远程桌面 陈拓 2021/08/05-2020/08/08 1. Putty登录 IP地址 192.168.0.103 登录账户 ccdc xxxxxxxx 2. Ubuntu 18.04安装桌面 如果安装的系统已经带桌面跳过这一步。 2.1 查看linux系统版本 lsb_release -a 2.2 安装桌面 sudo apt-get install ubuntu…

CSS浮动属性,知道原理就很简单,灵活控制块级元素在一行内显示

在页面布局中&#xff0c;有两个非常常用的CSS属性。它们巧妙的控制着块级元素们之间的位置&#xff0c;灵活的让块级元素在一行内显示或者另起一行。说到这里&#xff0c;相信大家已经猜出来了&#xff0c;这两个属性就是控制块级元素浮动的属性。整个页面布局过程中&#xff…

HTML Dom Table对象

http://www.w3school.com.cn/htmldom/dom_obj_table.asp Table 对象 Table 对象代表一个 HTML 表格。 在 HTML 文档中 <table> 标签每出现一次&#xff0c;一个 Table 对象就会被创建。 IE: Internet Explorer, F: Firefox, O: Opera, W3C: W3C 标准. Table 对象集合 集合…

HTML DOM deleteRow() 方法

http://www.w3school.com.cn/htmldom/met_table_deleterow.asp 定义和用法 deleteRow() 方法用于从表格删除指定位置的行。 语法 tableObject.deleteRow(index) 说明 参数 index 指定了要删除的行在表中的位置。行的编码顺序就是他们在文档源代码中出现的顺序。<thead> 和…

JavaScprit30-6 学习笔记

今天学习的是 仿即时搜索诗句效果 第一个问题&#xff1a; fetch() Fetch API 提供了一个 JavaScript接口&#xff0c;用于访问和操纵HTTP管道的部分&#xff0c;例如请求和响应。它还提供了一个全局 fetch()方法&#xff0c;该方法提供了一种简单&#xff0c;合乎逻辑的方式…