热门关键字：
jquery > jquery教程 > 插件详解 > Jquery让IE6支持PNG透明背景图片插件详解

Jquery让IE6支持PNG透明背景图片插件详解

10384
作者：管理员
发布时间：2012/7/22 17:09:58
评论数：5
转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=8
Jquery让IE6支持PNG透明背景图片插件用法超简单：
1、引入Jquery核心库js文件
2、引入支持PNG透明背景图片插件js文件
以上两个步骤就可以了
 
插件代码如下：
 
  1. (function($) {   
  2.     jQuery.fn.pngFix = function(settings) {   
  3.         settings = jQuery.extend({   
  4.             blankgif: 'blank.gif'  
  5.         },   
  6.         settings);   
  7.         var ie55 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 5.5") != -1);   
  8.         var ie6 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 6.0") != -1);   
  9.         if (jQuery.browser.msie && (ie55 || ie6)) {   
  10.             jQuery(this).find("img[src$=.png]").each(function() {   
  11.                 jQuery(this).attr('width', jQuery(this).width());   
  12.                 jQuery(this).attr('height', jQuery(this).height());   
  13.                 var prevStyle = '';   
  14.                 var strNewHTML = '';   
  15.                 var imgId = (jQuery(this).attr('id')) ? 'id="' + jQuery(this).attr('id') + '" ': '';   
  16.                 var imgClass = (jQuery(this).attr('class')) ? 'class="' + jQuery(this).attr('class') + '" ': '';   
  17.                 var imgTitle = (jQuery(this).attr('title')) ? 'title="' + jQuery(this).attr('title') + '" ': '';   
  18.                 var imgAlt = (jQuery(this).attr('alt')) ? 'alt="' + jQuery(this).attr('alt') + '" ': '';   
  19.                 var imgAlign = (jQuery(this).attr('align')) ? 'float:' + jQuery(this).attr('align') + ';': '';   
  20.                 var imgHand = (jQuery(this).parent().attr('href')) ? 'cursor:hand;': '';   
  21.                 if (this.style.border) {   
  22.                     prevStyle += 'border:' + this.style.border + ';';   
  23.                     this.style.border = '';   
  24.                 }   
  25.                 if (this.style.padding) {   
  26.                     prevStyle += 'padding:' + this.style.padding + ';';   
  27.                     this.style.padding = '';   
  28.                 }   
  29.                 if (this.style.margin) {   
  30.                     prevStyle += 'margin:' + this.style.margin + ';';   
  31.                     this.style.margin = '';   
  32.                 }   
  33.                 var imgStyle = (this.style.cssText);   
  34.                 strNewHTML += '<span ' + imgId + imgClass + imgTitle + imgAlt;   
  35.                 strNewHTML += 'style="position:relative;white-space:pre-line;display:inline-block;background:transparent;' + imgAlign + imgHand;   
  36.                 strNewHTML += 'width:' + jQuery(this).width() + 'px;' + 'height:' + jQuery(this).height() + 'px;';   
  37.                 strNewHTML += 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader' + '(src=\'' + jQuery(this).attr('src') + '\', sizingMethod=\'scale\');';   
  38.                 strNewHTML += imgStyle + '"></span>';   
  39.                 if (prevStyle != '') {   
  40.                     strNewHTML = '<span style="position:relative;display:inline-block;' + prevStyle + imgHand + 'width:' + jQuery(this).width() + 'px;' + 'height:' + jQuery(this).height() + 'px;' + '">' + strNewHTML + '</span>';   
  41.                 }   
  42.                 jQuery(this).hide();   
  43.                 jQuery(this).after(strNewHTML);   
  44.             });   
  45.             jQuery(this).find("*").each(function() {   
  46.                 var bgIMG = jQuery(this).css('background-image');   
  47.                 if (bgIMG.indexOf(".png") != -1) {   
  48.                     var iebg = bgIMG.split('url("')[1].split('")')[0];   
  49.                     jQuery(this).css('background-image', 'none');   
  50.                     jQuery(this).get(0).runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + iebg + "',sizingMethod='scale')";   
  51.                 }   
  52.             });   
  53.             jQuery(this).find("input[src$=.png]").each(function() {   
  54.                 var bgIMG = jQuery(this).attr('src');   
  55.                 jQuery(this).get(0).runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader' + '(src=\'' + bgIMG + '\', sizingMethod=\'scale\');';   
  56.                 jQuery(this).attr('src', settings.blankgif)   
  57.             });   
  58.         }   
  59.         return jQuery;   
  60.     };   
  61. })(jQuery);   
  62. $(document).ready(function() {   
  63.     $(document).pngFix();   
  64. });  

 

 




如果您觉得本文的内容对您的学习有所帮助：支付鼓励



关键字：Jquery让IE6支持PNG透明背景图片插件详解
友荐云推荐