兼容IE6和Firefox的PNG背景透明CSS代码-1NetMedia_Blog-※『一网传媒』博客系统※

说明：

1、当CSS中出现两个同样的属性，无论是否有!important，IE6只识别最后一个属性。（IE6是识别!important的，后面的background-image起干扰作用，呵呵~）

2、在Firefox下，!important被优先执行，FILTER滤镜不起作用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>兼容IE6和Firefox的PNG背景透明CSS代码-懒人图库</title>
<style type="text/css">
<!--
.lanrentuku {
background-image:url(http://www.1netmedia.cn/base/attachments/month_201012/28_211648_eb4h12593184560.png)!important;background-image:url(www.1netmedia.cn);
FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.1netmedia.cn/base/attachments/month_201012/28_211648_eb4h12593184560.png');WIDTH: 225px;height:38px;}
-->
</style>
</head>

<body>
<div class="lanrentuku"></div>

<p><strong>兼容IE6和Firefox的PNG背景透明CSS代码</strong></p>
<p>PNG的背景透明在网页中应用比较广泛，但浏览器的兼容问题一直很让人头疼，这个<a href="http://www.lanrentuku.com/js/jiaodiantu-710.html" target="_blank">JS焦点图代码</a>，是用JS判断的方法，西西用CSS变通的也实现了PNG背景透明的兼容问题。</p>
<p>说明：</p>
<p>1、当CSS中出现两个同样的属性，无论是否有!important，IE6只识别最后一个属性。（IE6是识别!important的，后面的background-image起干扰作用，呵呵~）</p>
<p>2、在Firefox下，!important被优先执行，FILTER滤镜不起作用。</p>
<p>作者：<a href="http://www.lanrentuku.com" target="_blank">西西</a>（尊重他人劳动成果，转载请自觉注明出处！）</p>
<p>查找更多代码，请访问：<a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p>
</body>
</html>

另存代码提示：您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为娱乐频道7栏JS焦点图代码，属于站长常用代码，更多焦点图代码请访问懒人图库JS代码频道。" />
<title>7栏JS焦点图代码</title>
<style type="text/css">
<!--
BODY {FONT: 12px "宋体"; COLOR: #000;}
A:hover {COLOR: #000; TEXT-DECORATION: underline}
A {COLOR: #454545; TEXT-DECORATION: none}
.div_xixi {BACKGROUND: #fff; MARGIN: 0px auto; WIDTH: 617px; POSITION: relative; HEIGHT: 267px}
.div_jimg {  MARGIN: 0px; WIDTH: 405px; HEIGHT: 267px}
.div_jimg #a_jimg {DISPLAY: block; WIDTH: 405px; HEIGHT: 267px}
.div_jimg #bigimg {  BORDER-RIGHT: #fd8383 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #fd8383 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #fd8383 1px solid; WIDTH: 403px; PADDING-TOP: 0px; BORDER-BOTTOM: #fd8383 1px solid; HEIGHT: 265px}
.div_jimg .ul_jimg {PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; RIGHT: 0px; BACKGROUND: url(http://www.1netmedia.cn/base/attachments/month_201012/bg_j04.jpg) repeat-y right top; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 225px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; POSITION: absolute; TOP: 0px; HEIGHT: 267px}
.div_jimg .ul_jimg LI {DISPLAY: inline; FLOAT: right; OVERFLOW: hidden; WIDTH: 212px; CURSOR: pointer; WORD-BREAK: break-all; TEXT-INDENT: 30px; PADDING-TOP: 14px; WHITE-SPACE: nowrap; HEIGHT: 24px; TEXT-OVERFLOW: ellipsis}
.div_jimg .ul_jimg A {POSITION: relative}
.div_jimg .ul_jimg .on {background-image:url(http://www.1netmedia.cn/base/attachments/month_201012/28_211648_eb4h12593184560.png)!important;background-image:url(www.lanrentuku.com);BACKGROUND: none transparent scroll repeat 0% 0%; FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.1netmedia.cn/base/attachments/month_201012/28_211648_eb4h12593184560.png',sizingMethod='scale'); WIDTH: 225px; COLOR: #fff; TEXT-INDENT: 43px; POSITION: static}
.div_jimg .ul_jimg .on A {FONT-WEIGHT: bold; COLOR: #fff}
-->
</style>
<SCRIPT type=text/javascript>

var currslid = 0;
var slidint;
function setfoc(id){
  document.getElementById("bigimg").src = picarry[id];
  document.getElementById("a_jimg").href = lnkarry[id];
  if (id==4) {
      document.getElementById("a_jimg").style.background = 'url('+picarry[0]+')'  
    }
    else {
      document.getElementById("a_jimg").style.background = 'url('+picarry[id+1]+')'
    }
  currslid = id;
  for(i=0;i<7;i++){
    document.getElementById("li_jimg"+i).className = "li_jimg";
  };
  document.getElementById("li_jimg"+id).className ="li_jimg on";

  var borserInfo=navigator.userAgent.toLowerCase();
  if(/msie/.test(borserInfo))
  {
    document.getElementById("bigimg").style.visibility = "hidden";
    document.getElementById("bigimg").filters[0].Apply();
    document.getElementById("bigimg").filters[0].transition=23;
    if (document.getElementById("bigimg").style.visibility == "visible") {
      document.getElementById("bigimg").style.visibility = "hidden";
    }
    else {
      document.getElementById("bigimg").style.visibility = "visible";
    }
    document.getElementById("bigimg").filters[0].Play();
  }
  stopit();
}

function playnext(){
  if(currslid==6){
    currslid = 0;
  }
  else{
    currslid++;
  };
  setfoc(currslid);
  playit();
}
function playit(){
  slidint = setTimeout(playnext,2500);
}
function stopit(){
  clearTimeout(slidint);
  }

window.onload = function(){
  playit();
}

function playit01(){
  document.getElementById("playStop").className = "stop";
  playit();
}
function stopit01(){
  document.getElementById("playStop").className = "play";
  stopit();
  }
  
</SCRIPT>
</head>
<BODY><br><br>

<TABLE id=pictable style="DISPLAY: none">
  <TBODY>
  <TR>
    <TD><IMG src="http://www.1netmedia.cn/base/attachments/month_201012/0014224750740c7437691a.jpg" border=0></TD>
    <TD>郭富城拒娶进门 熊黛林扫便宜货</TD>
    <TD>http://www.lanrentuku.com/</TD></TR>
  <TR>
    <TD><IMG src="http://www.1netmedia.cn/base/attachments/month_201012/0014224750740c74379a39.jpg" border=0></TD>
    <TD>明星身价随票房涨 赵薇升最快</TD>
    <TD>http://www.lanrentuku.com/</TD></TR>
  <TR>
    <TD><IMG src="http://www.1netmedia.cn/base/attachments/month_201012/0014224750740c7437cc40.jpg" border=0></TD>
    <TD>张柏芝倚窗见光捧腹逃</TD>
    <TD>http://www.lanrentuku.com/</TD></TR>
  <TR>
    <TD><IMG src="http://www.1netmedia.cn/base/attachments/month_201012/0014224750740c70515526.jpg" border=0></TD>
    <TD>芙蓉姐姐妖艳登场</TD>
    <TD>http://www.lanrentuku.com/</TD></TR>
  <TR>
    <TD><IMG src="http://www.1netmedia.cn/base/attachments/month_201012/0014224750740c7051ab63.jpg" border=0></TD>
    <TD>老公新戏上映 李湘产后首次亮相</TD>
    <TD>http://www.lanrentuku.com/</TD></TR>
  <TR>
    <TD><IMG src="http://www.1netmedia.cn/base/attachments/month_201012/0014224750740c7052042f.jpg" border=0></TD>
    <TD>徐子淇探艾滋孤儿 打水烧柴憋尿</TD>
    <TD>http://www.lanrentuku.com/</TD></TR>
  <TR>
    <TD><IMG src="http://www.1netmedia.cn/base/attachments/month_201012/0014224750740c70524746.jpg" border=0></TD>
    <TD>精明港姐徐淑敏出嫁秘定3大条件</TD>
    <TD>http://www.lanrentuku.com/</TD></TR></TBODY></TABLE>

<DIV class=div_xixi>
<SCRIPT language=javascript type=text/javascript>
<!--
var picarry = {};
var lnkarry = {};
var ttlarry = {};
  function FixCode(str){
  return str.replace("'","=");
  }
  var t=document.getElementById("pictable");
  var rl=t.rows.length;
  var baseu=  document.URL.replace(/(http.*\/)(.*)/, "$1"); 
  if(baseu.indexOf("/servlet/")>=0)
  baseu = baseu.replace("/servlet/","/");

  var txt="";
  for(var i=0;i<rl;i++){
  try{
    picarry[i]=t.rows[i].cells[0].childNodes[0].src;
    lnkarry[i]=t.rows[i].cells[2].innerHTML;
    ttlarry[i]=FixCode(t.rows[i].cells[1].innerHTML);
    document.getElementById("li_jimg"+i).innerHTML = '<a href="'+lnkarry[id]+'" target="_blank" class="img"><img src="'+picarry[id]+'" alt=""><\/a>';
    alert(picarry[i]);
  }catch(e){

  }
}             
  document.write("<div class='div_jimg\'><a class='a_jimg' id='a_jimg' href='"+lnkarry[0]+"' title='' style='background:url("+picarry[1]+")' target='_blank'><img id='bigimg' style='filter:RevealTrans (duration='1',transition='23'); visibility:visible;' alt='' src='"+picarry[0]+"'><\/a><ul class='ul_jimg'><li class='li_jimg on' id='li_jimg0' onmouseover='setfoc(0)' onmouseout='playit()'><a href='"+lnkarry[0]+"' target='_blank' class='img'>"+ttlarry[0]+"<\/a><\/li><li class='li_jimg' id='li_jimg1' onmouseover='setfoc(1)' onmouseout='playit()'><a href='"+lnkarry[1]+"' target='_blank' class='img'>"+ttlarry[1]+"<\/a><\/li><li class='li_jimg' id='li_jimg2' onmouseover='setfoc(2)' onmouseout='playit()'><a href='"+lnkarry[2]+"' target='_blank' class='img'>"+ttlarry[2]+"<\/a><\/li><li class='li_jimg' id='li_jimg3' onmouseover='setfoc(3)' onmouseout='playit()'><a href='"+lnkarry[3]+"' target='_blank' class='img'>"+ttlarry[3]+"<\/a><\/li><li class='li_jimg' id='li_jimg4' onmouseover='setfoc(4)' onmouseout='playit()'><a href='"+lnkarry[4]+"' target='_blank' class='img'>"+ttlarry[4]+"<\/a><\/li><li class='li_jimg' id='li_jimg5' onmouseover='setfoc(5)' onmouseout='playit()'><a href='"+lnkarry[5]+"' target='_blank' class='img'>"+ttlarry[5]+"<\/a><\/li><li class='li_jimg' id='li_jimg6' onmouseover='setfoc(6)' onmouseout='playit()'><a href='"+lnkarry[6]+"' target='_blank' class='img'>"+ttlarry[6]+"<\/a><\/li><\/ul><\/div>");
-->
</SCRIPT>
</DIV>
</DIV>

<br /><br />
<table width="621" height="164" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="164" align="center"><p>代码整理：<a href="http://www.lanrentuku.com/" target="_blank">懒人图库（西西）</a>　来源：<a href="http://www.sznews.com/ent/" target="_blank">深圳新闻网</a></p>
      <p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
      <p></p>
      <p><p>适合做娱乐频道的焦点图，兼容IE和Firefox，推荐下载。</p></p>
    <p></p></td>
  </tr>
</table>
<p>&nbsp;</p>
</body>
</html>

另存代码提示：您可以先修改部分代码再运行

用户登陆
用户:
密码:
验证:

站点日历
<< < 2021 - 04 > >>
日	一	二	三	四	五	六
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

发表评论
请先注册，才能发表评论！ - 注册 -