使用filter完成的漂亮的CSS渐变特效——blendtrans

再说神奇的 filter 滤镜，不过要提醒大家的就是在 firefox 下面不能使用 filter

blendtrans的设置特别简单，就是设置一个转换时间：
filter:blendtrans(duration=3)
单位是秒
这次用 blendtrans 来实现渐变成另外一幅图，先粘贴到记事本里面保存成html看看效果再看代码吧：

< html >
< head >
< script  type ="text/javascript" > ...
// 申明数组并给数组元素赋值，也就是把图片的相对路径保存起来，若是图片较多，可增加数组元素的个数，
// 我在这个例子中只用了三张图片，所以数组元素个数为“3"。
ImgName = new Array(2);
ImgName[0]="http://tech.china.com/zh_cn/netschool/homepage/css/600/20001127/07-1.jpg"; 
ImgName[1]="http://tech.china.com/zh_cn/netschool/homepage/css/600/20001127/07-3.jpg"; 
var i=0;
// 演示变换效果
function playImg()
...{
   if(i==1)
    ...{i=0;}
else
...{ i++; }
var myimg = window.document.getElementById('myimg');
myimg.filters[0].apply(); // 这里的“myimg”是你在网页中插入的那张图片的代号，
myimg.src=ImgName[i]; // 当你改变了插入的图片代号时，这里也一定要改变，
myimg.filters[0].play(); // 否则，程序在变换时可就找不着北了。
// 设置演示时间，这里是以毫秒为单位的，所以“6000"是指每张图片的演示时间是6秒钟，这个时间值要在于
// 滤镜中设置的转换时间值，这样当转换结束后还停留一段时间，让人看清楚图片。
mytimeout=setTimeout("playImg()",6000);
}

</ script >


< style  type ="text/css" > ...
<!--
.myblen{...}{filter:blendtrans(duration=3)}
-->
</ style >
</ head >
< body  onload ="playImg();" >
< img  src ="http://tech.china.com/zh_cn/netschool/homepage/css/600/20001127/07-1.jpg"  class ="myblen"  id ="myimg"  align ="left" >
</ body >
</ html >

 

这个只是个基础演示，最实际的用途就是拿它来做漂亮的菜单，如下：

 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
  < HEAD >
   < TITLE >  使用blendtrans做的菜单栏  </ TITLE >
   < meta  http-equiv ="Content-Type"  content ="text/html;charset=gb2312"   />

< STYLE > ...
<!--
.xmenu td{...}{font-size:12px;font-family:verdana,arial;font-weight:none;color:#333333;border:1px solid #ffffff;background:#f6f6f6;filter:blendtrans(duration=0.5);cursor:hand;text-align:center;}
-->
</ STYLE >
< script > ...
function attachXMenu(objid)...{
    var tds=objid.getElementsByTagName('td');
    for(var i=0;i<tds.length;i++)...{
        with(tds[i])...{
            onmouseover=function()...{
                with(this)...{
                    filters[0].apply();
                    style.background='#64A1DE'; //这是鼠标移上去时的背景颜色
                    style.border='1px solid #ffffff'; //边框
                    style.color='#ffffff'; //文字颜色
                    filters[0].play();
                }
            }
            onmouseout=function()...{
                with(this)...{
                    filters[0].apply();
                    style.background='#f6f6f6'; //这是鼠标离开时的背景颜色
                    style.border='1px solid #ffffff'; //边框
                    style.color='#333333'; //文字颜色
                    filters[0].play();
                }
            }
        }
    }
}
</ script >
  </ HEAD >

  < BODY >
  < table  class ="xmenu"  id ="xmenu0"  border ="0"  width ="944"  cellspacing ="1"  cellpadding ="1"  height ="30"  id ="table5" >
     < tr >
         < td > 首页 </ td >
         < td  > 新闻中心 </ td >
         < td > 下载中心 </ td >
         < td > 留言板 </ td >
         < td > 关于 </ td >
     </ tr >                     
</ table >
< script > ... attachXMenu(xmenu0); //在上面这个table结束的地方执行事件动作的绑定, 这里的这个xmenu0就是那个table的id</script>
 </BODY>
</HTML>