如何实现类似于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吧,简单方便,可以直接设置弹出位置和显示效果等。