JS 完成颜色渐变~~

 

上微软中国网站时发现页面上方的颜色渐变非常好，如图：

查看其源代码，发现在内部用了类似如下的样式：

style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#98B2E6', gradientType='1')"

然后我写了个测试网页试了试，果然可以。代码如下：

<!---------------------------------------->

<TABLE height=30 cellSpacing=0 cellPadding=0 width=600 align=center border=0>

<TBODY>

<TR>

  <TD id="mybg" style="FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#98B2E6', gradientType='1')">&nbsp;

  </TD>

</TR>

</TBODY>

</TABLE>

<!---------------------------------------->

在头部加如下代码，实现颜色渐变：

<script language="JavaScript">
<!--
var m=250;
var s=-5;
var mycol;
var timeID=0;

function aa()
{
 m=m+s;
 mycol=m.toString(16);
 
 if(m<16)
  mycol="0"+mycol;
 
 mybg.filters.item('DXImageTransform.Microsoft.Gradient').StartColorStr="#"+mycol+"8888";
 mybg.filters.item('DXImageTransform.Microsoft.Gradient').EndColorStr="#88"+mycol+"88";

 if(m>245)
  s=-Math.abs(s);
 
 if(m<10)
  s=Math.abs(s);

 timeID=setTimeout("aa()",100);
}
//-->
</script>