Fungsi berkaitan PNG di bawah kemahiran browser_javascript IE

Pada masa ini, Internet mempunyai keperluan yang lebih tinggi dan lebih tinggi untuk kesan halaman web, dan tidak dapat dielakkan untuk menggunakan imej PNG dibahagikan kepada beberapa format, PNG8, PNG24, PNG32, antaranya yang paling biasa digunakan, yang juga. mempunyai kesan dan saiz paparan yang sederhana, ialah PNG24 Ia menyokong ketelusan, ketelusan dan warna yang sangat kaya, bagaimanapun, kerana kebanyakan orang Cina kami menggunakan siri IE atau pelayar dengan IE sebagai siri teras, dan kerana WINDOWS XP mempunyai yang agak besar. bahagian pasaran dalam pasaran domestik, dan ramai orang masih menggunakan XP IE6 IE7 IE8 dan penyemak imbas lain, dan pelayar ini mempunyai lebih kurang jurang dalam sokongan mereka untuk PNG dan IE7 IE8 tidak menyokong PNG sepenuhnya . Apabila menukar ketelusan imej di bawah IE7 IE8, PNG tidak akan disokong dalam kawasan lutsinar penampilan Selepas beberapa penyelidikan, saya mendapati bahawa menggunakan PNG sebagai latar belakang, gunakan Microsoft Penapis unik memuatkan imej, yang boleh menyelesaikan masalah IE6 tidak menyokong PNG, dan juga boleh menyelesaikan masalah tepi hitam apabila menggunakan kesan ketelusan animasi JQUERY di bawah. IE7 dan IE8 Terdapat kod dengan imej sebenar, seperti berikut:

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

Rujuk perpustakaan kelas jquery1.8 sebelum teg akhir /body halaman, dan kemudian tambah kod di atas Tiada masalah memaparkan PNG24 dalam IE6 7 8. Jika anda perlu melakukan animasi animasi atau mendapatkan gambar, anda akan mendapati bahawa dalam IE 6 7 8 kali, imej PNG tidak boleh ditemui, atau tiada respons apabila menukar kedudukan dan ketelusannya Sebabnya correctPNG menggantikan teg IMG semua PNG pada halaman dengan tag SPAN, dan kemudian menggunakan penapis: progid pada teg SPAN :DXImageTransform.Microsoft.AlphaImageLoader memuatkan imej PNG, jadi pendekatan yang disyorkan adalah untuk memasukkan imej dalam DIV Hanya satu teg IMG dibenarkan dalam DIV ini, dan kemudian melakukan kedudukan atau ketelusan operasi berkaitan pada DIV, contohnya:

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

Situasi lain ialah sebagai tambahan kepada ketelusan dan anjakan imej ini, saya juga perlu menukar lebar dan ketinggiannya Dalam kes ini, saya mengesyorkan kaedah berikut:

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

BUG: Jika anda mengubah suai ketelusan imej png di bawah IE7 dan IE8 secara dinamik, contohnya, jika anda menggunakan fadeIn dan melaraskan ketelusan imej kepada 25%, pepijat yang sangat pelik akan muncul png tidak akan dipaparkan. Ia bertukar menjadi warna hitam yang sangat hodoh!

Penyelesaian kepada pepijat di mana latar belakang imej png menjadi hitam di bawah IE7 dan IE8:

1 Jangan tukar ketelusan imej secara langsung, tetapi letakkan bekas untuk imej untuk mengubah suai ketelusan bekas
Sebagai contoh, kod asal ialah:

Ubah suai kepada:

2. Tambahkan warna latar belakang pada bekas ini

Ia adalah sangat penting. Kunci untuk menyelesaikan pepijat terletak pada langkah ini, seperti:

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

Dalam keadaan biasa, pepijat diselesaikan pada ketika ini Jika anda masih menghadapi masalah, sila lihat di bawah:

3. Tambahkan zum pada bekas: 1

zum: 1 Apakah peranan yang dimainkannya? Mengapakah IE mempunyai pepijat ini?
Ini adalah dua soalan, tetapi sebenarnya satu jawapan. IE mengubah suai ketelusan bukan melalui atribut CSS, tetapi melalui penapis Oleh itu, jika anda ingin memahami pepijat ini, anda mesti mencari sebab daripada penapis. Apabila penapis bertindak pada objek, objek mestilah nyata, iaitu, ia mestilah reka letak IE mempunyai atribut yang sangat istimewa: hasLayout Atribut ini boleh diberikan kepada bekas sebagai susun atur . Anda tidak boleh menulisnya secara langsung, tetapi ia mesti dimulakan melalui javascript Sebenarnya, terdapat cara lain untuk memulakan, iaitu menggunakan atribut css khas untuk memulakan hasLayout atribut ini adalah zum seperti display:inline-block, float:left, dsb. juga OK, tetapi hanya zum tiada kesan sampingan)

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.