IE8下jQuery改变png图片透明度时出现的黑边


Posted in Javascript onAugust 30, 2015

png24格式的图片在用jQuery添加显示隐藏动画时发现,图片的半透明区域出现黑边?

IE8下jQuery改变png图片透明度时出现的黑边

在网上搜了搜主要有以下几种办法:

1、把图片保存成PNG-8格式。

2、把背景色一起切入并保存为JPG格式。

以上两种方法我试了试,好像效果并不好png8格式仍就会有黑边。

解决方法:

1、不要直接改变图片的透明度,而是给图片套个容器,去修改这个容器的透明度
2、给这个容器加个颜色相近的背景颜色(非常重要,解决bug的关键就在这一步,)
一般情况下,到此bug就解决了,如果还是有问题,请看下面:

3、给容器加个zoom: 1
(个人觉得这种办法只不过是一个障眼法,没有从根本上解决问题,看来目前只能这样了,期待有更好的方法)

目前互联网对于网页效果要求越来越高,不可避免的用到PNG图片,PNG分为几种格 式,PNG8 PNG24 PNG32,其中最常用的,也是显示效果和大小比较适中的则是PNG24,支持半透明,透明,颜色也非常丰富,但由于咱们国人使用IE系列或以IE为内核 系列的浏览器占大多数,并且由于 WINDOWS XP在国内市场份额比较大,并且XP上好多人还在用IE6 IE7 IE8等浏览器,而这些浏览器对于PNG支持或多或少都有差距,IE6完全不支持PNG,IE7 IE8支持PNG不完全,在IE7 IE8下面对图片改变透明图的时候,延PNG透明区域的地方会有一条黑色的边框,如果有半透明的,则整个半透明区域都是黑色,这点对于要求美观的页面是不 能接受的,研究了下,发现把PNG当背景,用微软特有的滤镜加载图片,可以解决IE6不支持PNG的问题,并且也可以解决IE7 和IE8下面使用JQUERY动画透明效果时出现黑边的问题,有代码有真像,如下

Javascript代码

<script>
function correctPNG() {
  var arVersion = navigator.appVersion.split("MSIE")
  var version = parseFloat(arVersion[1])
  if ((version >= 5.5) && (document.body.filters)) {
    var lee_i = 0;
    var docimgs=document.images;
    for (var j = 0; j < docimgs.length; j++) {
      var img = docimgs[j]
      var imgName = img.src.toUpperCase();
      if (imgName.substring(imgName.length - 3, imgName.length) == "PNG" && !img.getAttribute("usemap")) {
        lee_i++;
        var SpanID = img.id || 'ra_png_' + lee_i.toString();
        var imgData = new Image();
        imgData.proData = SpanID;
        imgData.onload = function () {
          $("#" + this.proData).css("width", this.width + "px").css("height", this.height + "px");
        }
        imgData.src = img.src;
        var imgID = "id='" + SpanID + "' ";
        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=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
       + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
       + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
        img.outerHTML = strNewHTML;
        j = j - 1;
      }
    }
  }
}
//判断是否为IE8及以下浏览器,其实除了这三个浏览器不支持addEventListener,其它浏览器都没问题
if (typeof window.addEventListener == "undefined" && typeof document.getElementsByClassName == "undefined") {
  window.attachEvent("onload", correctPNG);
}
</script>

在页面的/body的结束标记之前先引用jquery1.8类库,再加入以上代码,IE6 7 8 显示PNG24都没有问题了,如果需要执行animate动画或获取图片时,发现在ie 6 7 8下找不到PNG图片了,或找到了改变其位置和透明图没有反应,这原因是correctPNG将页面上所有的PNG的IMG标签都替换成了SPAN标签,然后在SPAN标签上使用filter : progid:DXImageTransform.Microsoft.AlphaImageLoader 将PNG图片加载进来,所以,建议做法是在将图片用DIV包括起来,此DIV中只允许有一个IMG标签,然后对DIV进行位置或透明度的相关操作,例:

<div id='test'><img src='xxxx.png'/></div>
<script>
$("#test").animate({opacity:0.2,marginLeft:500},1000,function(){alert('run complete');});
</script>

还有一种情况是,我对这个图片除了要做透明和位移,还要改变其宽度和高度,对于这种情况,我建议采用以下方法

<div id='test'><img src='xxxx.png'/></div>
<script>
$($("#test span")[0]||$("#test img")[0]).animate({opacity:0.2,marginLeft:500,width:'500px',height:'500px'},1000,function(){alert('run complete');});
</script>

有问题欢迎共同探讨

Javascript 相关文章推荐
Javascript setInterval的两种调用方法(实例讲解)
Nov 29 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
Feb 19 Javascript
document.forms用法示例介绍
Jun 26 Javascript
JavaScript中扩展Array contains方法实例
Aug 23 Javascript
JavaScript中的函数声明和函数表达式区别浅析
Mar 27 Javascript
JS快速实现移动端拼图游戏
Sep 05 Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
Oct 26 Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 Javascript
Vue实现多页签组件
Jan 14 Vue.js
javascript中sort() 方法使用详解
Aug 30 #Javascript
javascript中的正则表达式使用详解
Aug 30 #Javascript
jQuery鼠标事件汇总
Aug 30 #Javascript
简单谈谈javascript中的变量、作用域和内存问题
Aug 30 #Javascript
jquery专业的导航菜单特效代码分享
Aug 29 #Javascript
js实现基于正则表达式的轻量提示插件
Aug 29 #Javascript
js精美的幻灯片画集特效代码分享
Aug 29 #Javascript
You might like
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
PHP导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
PHP设计模式之装饰者模式
2012/02/29 PHP
php通过pecl方式安装扩展的实例讲解
2018/02/02 PHP
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
jquery常用的12个小功能
2016/07/22 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
关于webpack2和模块打包的新手指南(小结)
2017/08/07 Javascript
koa-router源码学习小结
2018/09/07 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
[04:38]完美世界携手游戏风云打造 卡尔工作室饰品系统篇
2013/04/25 DOTA
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
Python登录注册验证功能实现
2018/06/18 Python
python  Django中的apps.py的目的是什么
2018/10/15 Python
python3去掉string中的标点符号方法
2019/01/22 Python
Python跳出多重循环的方法示例
2019/07/03 Python
python调用接口的4种方式代码实例
2019/11/19 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
亚历山大·王官网:Alexander Wang
2017/06/23 全球购物
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
优秀演讲稿范文
2013/12/29 职场文书
结婚典礼证婚词
2014/01/08 职场文书
《海底世界》教学反思
2014/04/16 职场文书
解除劳动合同证明书
2014/09/26 职场文书
三八红旗手事迹材料
2014/12/26 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
户外拓展训练感想
2015/08/07 职场文书
HTML5来实现本地文件读取和写入的实现方法
2021/05/25 HTML / CSS
教你漂亮打印Pandas DataFrames和Series
2021/05/29 Python
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python
使用Redis实现分布式锁的方法
2022/06/16 Redis