如何实现类似于QQ的淡入淡出右下角提示框效果?

如何实现类似于QQ的淡入淡出右下角提示框效果?我现在准备在项目中做,但是不知道怎么做,我的JavaScript和CSS都学的不好,不知道怎么做,望会做或者做过的朋友,提供我写思路或者源码也行。谢谢了 :)

我个人建议你学习一下EXTJS!这个就可以实现这个效果呀!

[code="html"]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


特效代码:弹出一个淡入淡出的提示框 var intTimeStep=20; var isIe=(window.ActiveXObject)?true:false; var intAlphaStep=(isIe)?5:0.05; var curSObj=null; var curOpacity=null; var stopTime=0; function startObjMessage(objId) { curSObj=document.getElementById(objId); if(isIe){curSObj.style.cssText='DISPLAY: none; Z-INDEX: 1; FILTER: alpha(opacity=0); POSITION: absolute;';} setMessage(); } function setMessage() { if(isIe){curSObj.filters.alpha.opacity=0;} else{curOpacity=0;curSObj.style.opacity=0} curSObj.style.display=''; setMessageShow(); } function setMessageShow() { if(isIe) { curSObj.filters.alpha.opacity+=intAlphaStep; if (curSObj.filters.alpha.opacity<100) {setTimeout('setMessageShow()',intTimeStep);} else{stopTime+=10;if(stopTime<500){setTimeout('setMessageShow()',intTimeStep);}else{stopTime=0;setMessageClose();}} }else { curOpacity+=intAlphaStep; curSObj.style.opacity =curOpacity; if (curOpacity<1) {setTimeout('setMessageShow()',intTimeStep);} else{stopTime+=10;if(stopTime<200){setTimeout('setMessageShow()',intTimeStep);}else{stopTime=0;setMessageClose();}} } } function setMessageClose() { if(isIe) { curSObj.filters.alpha.opacity-=intAlphaStep; if (curSObj.filters.alpha.opacity>0) { setTimeout('setMessageClose()',intTimeStep); } else { curSObj.style.display='none'; } } else { curOpacity-=intAlphaStep; if (curOpacity>0) { curSObj.style.opacity =curOpacity; setTimeout('setMessageClose()',intTimeStep); } else { curSObj.style.display='none'; } } }


效果二:淡入淡出的弹出消息
测试效果


[/code]







演示区域



<!--

var curObj=Inner1,i=0;

words=new Array(3);

words[0]="

渐渐隐去

";

words[1]="

慢慢浮现

";

words[2]="

这就是Blend的效果

";

function toggleMultimedia() {

  curObj.innerHTML=words[i];

  if (curObj.filters(0).status == 2) {

    curObj.filters(0).Stop();

    if (curObj.style.visibility == "hidden")

      curObj.style.visibility = "visible";

    else

      curObj.style.visibility = "hidden";

    window.setTimeout("toggleMultimedia()", 1);

  }

  //准备开始

  curObj.filters(0).Apply();

  

  if (curObj.style.visibility == "hidden")

    {curObj.style.visibility = "visible";}

  else

    {curObj.style.visibility = "hidden";

if (i==2) i=-1;

ii=i+1;}

  //开始

  curObj.filters(0).Play();

window.setTimeout("toggleMultimedia()",4000);

}

// -->/mce:script



本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/Littler_corn/archive/2010/01/03/5125904.aspx

jquery ui dialog吧,简单方便,可以直接设置弹出位置和显示效果等。