151-3895-5886

Javascript解决IE6和FF的PNG图片兼容性问题

2019年09月19日 维尼网络

网页棋牌游戏平台  PNG格式的图片文件对浏览器兼容不是很友好,但是这种透明PNG文件还可以做虚边效果,在设计中开始用的越来越多了。非常是IE6,bug多、支持差,但是没有方案用户数量也特别多,首先还是要考虑对它的支持。FF对PNG格式的图片支持很好,IE7也改进支持PNG。

  网上流传一个简单的方案来解决IE6和FF的PNG兼容性问题,一段js代码就可以搞定。代码如下,建议把这段代码存为一个独立的js文件,方便页面调用。

  并未作测试,大家在使用前先测试一下。

function correctPNG()
   {
   for(var i=0; i<document.images.length; i++)
      {
     var img = document.images[i]
     var imgName = img.src.toUpperCase()
     if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
        {
       var imgID = (img.id) ? "id='" + img.id + "' " : ""
       var imgClass = (img.className) ? "class='" + img.className + "' " : ""
       var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
       var imgStyle = "display:inline-block;" + img.style.cssText
       if (img.align == "left") imgStyle = "float:left;" + imgStyle
       if (img.align == "right") imgStyle = "float:right;" + imgStyle
       if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle    
       var strNewHTML = "<span " + imgID + imgClass + imgTitle
       + " style=http://www.dnzs.com.cn/"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
        + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
       + "(src=http://www.dnzs.com.cn/'" + img.src + "/', sizingMethod='scale');/"></span>"
       img.outerHTML = strNewHTML
       i = i-1
        }
      }
   }
function alphaBackgrounds(){
   var rslt = navigator.appVersion.match(/MSIE (d+.d+)/, '');
   var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
   for (i=0; i<document.all.length; i++){
      var bg = document.all[i].currentStyle.backgroundImage;
      if (bg){
         if (bg.match(/.png/i) != null){
            var mypng = bg.substring(5,bg.length-2);
   //alert(mypng);
            document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"', sizingMethod='crop')";
            document.all[i].style.backgroundImage = "url('')";
   //alert(document.all[i].style.filter);
         }                                              
      }
   }
}

if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
window.attachEvent("onload", correctPNG);
window.attachEvent("onload", alphaBackgrounds);
}

阅读更多内容
上一篇JavaScript学习教程
下一篇深入学习Javascript函数

网页棋牌游戏平台声明:本页内容由郑州维尼网络收集编辑所得,所有资料仅供用户参考,转载请保留此链接http://rbyvp.cn/cms/3617.html

本文标签: javascript 图片 兼容性 解决 问题

 

相关资讯 Related Info
相关分类 News Classification
解决方案 Solutions
相关热点 Hot spot
接触 solaris : 整和 apache 和 tomcat 接触 solaris : 整和 apache 和 tomcat
  1. 我们的承诺
  2. 我们的实力
  3. 我们的未来
郑州做网站咨询电话 建站咨询

151-3895-5886

网站备案安全放心网站

地址:郑州市上街区和昌都汇广场 / 电话:151-3895-5886
客服QQ: / 邮箱:admin@zzwn.cn
网页棋牌游戏平台 Copyright © 2010-2019 郑州融科网络 版权所有

北京快乐8飞盘 北京快乐8官网 最正规的棋牌游戏平台 北京快乐8走势图 北京快乐8和值 棋牌游戏送88彩金 网易彩票网 现金的棋牌游戏 棋牌游戏行业资讯 最正规的棋牌游戏平台 真人百家乐平台复制打开网址【82324.com】 真人百家乐平台复制打开网址【82324.com】 真人百家乐平台复制打开网址【82324.com】 真人百家乐平台复制打开网址【82324.com】 真人百家乐平台复制打开网址【82324.com】 北京赛车平台复制打开网址【82324.com】 澳门百家乐平台复制打开网址【82324.com】 秒速赛车平台复制打开网址【82324.com】 秒速赛车平台复制打开网址【82324.com】 秒速飞艇平台复制打开网址【82324.com】 重庆时时彩平台复制打开网址【82324.com】 重庆时时彩平台复制打开网址【82324.com】 重庆时时彩平台复制打开网址【82324.com】 加拿大28平台复制打开网址【82324.com】 加拿大28平台复制打开网址【82324.com】 加拿大28平台复制打开网址【82324.com】 秒速快3平台复制打开网址【82324.com】 秒速快3平台复制打开网址【82324.com】 秒速快3平台复制打开网址【82324.com】 秒速牛牛平台复制打开网址【82324.com】 秒速牛牛平台复制打开网址【82324.com】 秒速牛牛平台复制打开网址【82324.com】 彩票开户平台复制打开网址【82324.com】 彩票开户平台复制打开网址【82324.com】 幸运快乐8平台复制打开网址【82324.com】 幸运快乐8平台复制打开网址【82324.com】 幸运快乐8平台复制打开网址【82324.com】 幸运快乐8平台复制打开网址【82324.com】 幸运28平台复制打开网址【82324.com】 幸运28平台复制打开网址【82324.com】 幸运28平台复制打开网址【82324.com】 快乐赛车平台复制打开网址【82324.com】 快乐赛车平台复制打开网址【82324.com】 快乐赛车平台复制打开网址【82324.com】 太阳城娱乐平台复制打开网址【82324.com】 太阳城娱乐平台复制打开网址【82324.com】 凤凰彩票APP下载平台复制打开网址【82324.com】 秒速赛车平台复制打开网址【82324.com】 秒速赛车平台复制打开网址【82324.com】 盛世彩票平台复制打开网址【82324.com】 盛世彩票官网 复制打开网址【82324.com】 盛世彩票官网 复制打开网址【82324.com】 香港马会资料平台复制打开网址【82324.com】 香港马会资料平台复制打开网址【82324.com】 香港马会资料平台复制打开网址【82324.com】 香港马会资料平台复制打开网址【82324.com】 大发彩票平台复制打开网址【82324.com】 大发彩票平台复制打开网址【82324.com】 大发彩票平台复制打开网址【82324.com】 迪士尼彩票官网平台复制打开网址【82324.com】 迪士尼彩票官网平台复制打开网址【82324.com】 迪士尼彩票官网平台复制打开网址【82324.com】 迪士尼彩票官网平台复制打开网址【82324.com】 加拿大28预测平台复制打开网址【82324.com】 加拿大28预测平台复制打开网址【82324.com】 加拿大28预测平台复制打开网址【82324.com】 太阳城平台复制打开网址【82324.com】 太阳城平台复制打开网址【82324.com】 幸运飞艇平台复制打开网址【82324.com】 幸运飞艇平台复制打开网址【82324.com】
分享到:QQ空间新浪微博腾讯微博人人网微信