IEブラウザでのPNG関連機能_JavaScriptスキル

現在、インターネットでは 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 には、次のような実際のイメージを含むコードがあります。

<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>

バグ: IE7 および IE8 で png 画像の透明度を動的に変更する場合、たとえば、フェードインを適用して画像の透明度を 25% に調整すると、非常に奇妙なバグが表示されます。 pngは表示されません。すごく汚い黒色になってしまいました！

IE7 および IE8 で PNG 画像の背景が黒くなるバグの解決策:

1. 画像の透明度を直接変更するのではなく、画像のコンテナを配置してコンテナの透明度を変更します

たとえば、元のコードは次のとおりです:

次のように変更します:

2. このコンテナに背景色を追加します

バグを解決するための鍵は、次のようなステップにあります。

.share-list-icon-shadow{ 
  width:60px;height:21px; 
  position:absolute;bottom:8px;left:0px;z-index: 1; 
  margin: 0 auto; 
  display:block; 
  background:#FAFDEF; 
} 

通常の状況では、この時点でバグは解決されていますが、まだ問題がある場合は、以下を参照してください。

3. コンテナにズームを追加します: 1

ズーム: 1 どのような役割を果たしますか?なぜ IE にこのようなバグがあるのでしょうか?

これらは 2 つの質問ですが、実際には答えは 1 つです。 IE は CSS 属性ではなくフィルターを通じて透明度を変更するため、このバグを理解したい場合はフィルターから原因を見つける必要があります。フィルターがオブジェクトに作用する場合、そのオブジェクトは有形である必要があります。つまり、IE には、hasLayout という非常に特殊な属性があり、この属性をレイアウトとしてコンテナーに与えることができます。 . css を直接記述することはできませんが、JavaScript を介して起動する必要があります。実際には、特別な css 属性を使用して、この css 属性を偽装して起動する必要があります。 display:inline-block、float:left などもOKですが、副作用がないのはズームのみです)

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。