首页 > WORK > 显示图片渐隐效果

显示图片渐隐效果

版权声明:本文可以任意转载,转载时请务必以超链接形式标明文章原始出处作者署名本版权声明

用下面的代码可以在网页中显示图片渐隐效果(IE中有效):

1.Script代码:

<SCRIPT>
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();
function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
  if (object != "[object]"){ 
      setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
      return;
  }
     
  clearTimeout(nereidFadeTimers[object.sourceIndex]);
 
  diff = destOp-object.filters.alpha.opacity;
  direction = 1;
  if (object.filters.alpha.opacity > destOp){
      direction = -1;
  }
  delta=Math.min(direction*diff,delta);
  object.filters.alpha.opacity+=direction*delta;

  if (object.filters.alpha.opacity != destOp){
      nereidFadeObjects[object.sourceIndex]=object;
      nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
  }
}
</SCRIPT>

2.html代码:

<img src="http://www.google.com/images/logo_sm.gif" id="logo" border=0 style="FILTER: alpha(opacity=50)" onMouseOver=nereidFade(this,100,40,5) onMouseOut=nereidFade(this,30,40,5)>

3.可以自己测试一下效果,我这里就不显示了。

分类: WORK 标签: ,
  1. 小胖个
    2009年8月15日22:02 | #1

    google首页的那个效果,很好看的。