PNG-bezogene Funktionen unter IE browser_javascript-Kenntnissen

Gegenwärtig werden im Internet immer höhere Anforderungen an Webseiteneffekte gestellt, und es ist unvermeidlich, PNG-Bilder zu verwenden. PNG ist in mehrere Formate unterteilt: PNG8, PNG24, PNG32, darunter das am häufigsten verwendete hat einen mäßigen Anzeigeeffekt und eine moderate Größe und ist PNG24. Es unterstützt jedoch Transluzenz, Transparenz und sehr satte Farben, da die meisten unserer Chinesen die IE-Serie oder Browser mit IE als Kernserie verwenden und weil WINDOWS XP relativ groß ist Marktanteil auf dem heimischen Markt, und viele Leute verwenden immer noch IE6 IE7 IE8 und andere Browser, und diese Browser haben mehr oder weniger Lücken in ihrer Unterstützung für PNG. IE6 unterstützt PNG überhaupt nicht, und IE7 IE8 unterstützt PNG nur unvollständig . Beim Ändern der Transparenz eines Bildes unter IE7 IE8 wird kein schwarzer Rand im transparenten Bereich angezeigt. Dies ist für Seiten, die eine schöne Darstellung erfordern, nicht akzeptabel Nach einigen Recherchen habe ich festgestellt, dass bei Verwendung von PNG als Hintergrund Bilder von Microsoft geladen werden können. Dies kann das Problem lösen, dass IE6 PNG nicht unterstützt, und kann auch das Problem der schwarzen Kanten bei Verwendung des JQUERY-Animationstransparenzeffekts lösen IE7 und IE8. Es gibt einen Code mit einem echten Bild, wie folgt:

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

Referenzieren Sie vor dem End-Tag von /body der Seite auf die Klassenbibliothek jquery1.8 und fügen Sie dann den obigen Code hinzu. Es gibt kein Problem bei der Anzeige von PNG24 in IE6 7 8. Wenn Sie animierte Animationen durchführen oder Bilder abrufen müssen, Sie werden feststellen, dass in IE 6 7 8 Mal das PNG-Bild nicht gefunden werden kann oder beim Ändern seiner Position und Transparenz keine Reaktion erfolgt. Der Grund dafür ist, dass CorrectPNG die IMG-Tags aller PNGs auf der Seite durch SPAN-Tags ersetzt Verwendet dann filter: progid für die SPAN-Tags. :DXImageTransform.Microsoft.AlphaImageLoader lädt das PNG-Bild. Daher ist die empfohlene Vorgehensweise, das Bild in ein DIV aufzunehmen. In diesem DIV ist nur ein IMG-Tag zulässig, und dann wird die Position oder Transparenz ausgeführt verwandte Operationen auf dem DIV, zum Beispiel:

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

Eine andere Situation ist, dass ich zusätzlich zur Transparenz und Verschiebung dieses Bildes auch seine Breite und Höhe ändern muss. In diesem Fall empfehle ich die folgende Methode:

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

FEHLER: Wenn Sie die Transparenz eines PNG-Bildes unter IE7 und IE8 dynamisch ändern, wenn Sie beispielsweise ein FadeIn anwenden und die Transparenz des Bildes auf 25 % anpassen, tritt ein sehr seltsamer Fehler auf Das PNG wird nicht angezeigt. Es hat eine sehr hässliche schwarze Farbe angenommen!

Lösung für den Fehler, bei dem der Hintergrund von PNG-Bildern unter IE7 und IE8 schwarz wird:

1. Ändern Sie nicht direkt die Transparenz des Bildes, sondern fügen Sie einen Container für das Bild ein, um die Transparenz des Containers zu ändern
Der Originalcode lautet beispielsweise: 0131c46f0d9245bb311d3114692a5fae

Ändern in:21c86848ea3e281d6919291ffc9afa87881c3d16ac7d3a757d0ee88c64187efa16b28748ea4df4d9c2150843fecfba68

2. Fügen Sie diesem Container eine Hintergrundfarbe hinzu

Es ist sehr wichtig, Fehler zu beheben, wie zum Beispiel:

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

Unter normalen Umständen ist der Fehler an dieser Stelle behoben. Wenn weiterhin Probleme auftreten, lesen Sie bitte unten nach:

3. Zoom zum Container hinzufügen: 1

Zoom: 1 Welche Rolle spielt es? Warum hat der IE diesen Fehler?
Das sind zwei Fragen, aber eigentlich eine Antwort. IE ändert die Transparenz nicht durch CSS-Attribute, sondern durch Filter. Wenn Sie diesen Fehler verstehen möchten, müssen Sie daher die Ursache anhand der Filter ermitteln. Wenn der Filter auf ein Objekt einwirkt, muss das Objekt greifbar sein, das heißt, es muss ein ganz besonderes Attribut haben: hasLayout. Dieses Attribut kann dem Container als Layout zugewiesen werden Es ist nicht möglich, CSS direkt zu starten, aber es gibt eine andere Möglichkeit, hasLayout zu starten (andere Attribute). wie display:inline-block, float:left usw. sind auch in Ordnung, aber nur Zoom hat keine Nebenwirkungen)

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.