IE8_jquery で jQuery が PNG 画像の透明度を変更すると黒いエッジが表示される-jsチュートリアル-php.cn

IE8_jquery で jQuery が PNG 画像の透明度を変更すると黒いエッジが表示される

WBOY

リリース： 2016-05-16 15:41:30

オリジナル

1576 人が閲覧しました

jQuery を使用して png24 形式の画像に表示/非表示アニメーションを追加すると、画像の半透明の領域に黒いエッジが表示されることに気づきましたか?

ネットで検索すると主に以下の方法があります。

1. 画像を PNG-8 形式で保存します。

2. 背景色を切り取ってJPG形式で保存します。

上記の2つの方法を試してみましたが、png8形式ではまだ黒いエッジが残るようです。

解決策:

1. 画像の透明度を直接変更するのではなく、画像のコンテナを配置してコンテナの透明度を変更します
2. このコンテナに似た色の背景色を追加します (非常に重要です。バグを解決する鍵はこのステップです)
通常の状況では、この時点でバグは解決されています。まだ問題がある場合は、以下を参照してください。

3. コンテナにズームを追加します: 1
(個人的にはこの方法はごまかしで根本的な解決にはならないと思っています。今のところこれしか方法がないようです。より良い方法を期待します)

現在、インターネットでは Web ページの効果に対する要件がますます高まっており、PNG 画像を使用することは避けられません。PNG 画像は PNG8、PNG24、PNG32 などのいくつかの形式に分かれており、その中で最も一般的に使用されている形式も同様です。適度な表示効果とサイズを備え、半透明、透明度、および非常に豊富な色をサポートしています。ただし、中国人のほとんどは IE シリーズまたは IE をコアシリーズとするブラウザを使用しているため、WINDOWS XP のサイズは比較的大きいです。国内市場でのシェアは依然として高く、多くの人は依然として XP、IE7、IE8 およびその他のブラウザを使用していますが、これらのブラウザの PNG サポートには多かれ少なかれギャップがあります。IE6 は PNG をまったくサポートしておらず、IE7 IE8 は PNG を不完全にサポートしています。 IE7 IE8 で画像の透明度を変更すると、透明部分に黒い枠が発生し、透明部分全体が黒くなります。外観を調べた結果、PNG を背景として使用すると、Microsoft を使用して画像を読み込むことができました。IE6 が PNG をサポートしていない問題を解決でき、また、JQUERY アニメーションの透明効果を使用するときに黒エッジが発生する問題も解決できます。 IE7とIE8には以下のようなコードと実際のイメージがあります

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) &#63; "class='" + img.className + "' " : ""
        var imgTitle = (img.title) &#63; "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 を表示する場合は問題ありません。アニメーションを実行したり、画像を取得する必要がある場合は、 IE 6、7、8 では、PNG 画像が見つからないか、位置と透明度を変更しても応答がないことがわかります。その理由は、correctPNG がページ上のすべての PNG の IMG タグを SPAN タグに置き換えるためです。次に、SPAN タグで filter: progid を使用します。 :DXImageTransform.Microsoft.AlphaImageLoader は PNG 画像をロードするため、この DIV には IMG タグを 1 つだけ含めて、位置または透明度を実行することをお勧めします。 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>

ログイン後にコピー

ご質問がございましたら、お気軽にご相談ください