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

问答首页 → Web前端技术

0 0

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

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

问题补充：可进行拖动，只能在窗体内部进行拖动，不能拖出窗体内部

Web综合

2010年1月24日 11:47

zbheart
25
0 0 0

采纳的答案

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

2010年1月25日 22:22

honglove
489
0 0 0

添加评论

0 0

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

2010年1月24日 12:37

蔡华江
3392
0 0 0

添加评论

0 0

<html>
<head>
</head>
<body>
<div style="position:absolute;left:200;top:50;width:400;height:220;background-
color:yellow;
color:blue;font-size:20px;border:solid black;"
id="main">
<div id="Inner1"
style="position:relative;left:20%;top:35%;width:60%;height:30%; filter:blendTrans(duration=3);"
>
<p align=center>演示区域</p>
</div>
<div id="control" style="position:absolute;left:180;top:180">
<input type=button value="开始" onclick="toggleMultimedia();">
</div>
</div>
<mce:script language="JavaScript"></mce:script>
</body>
</html>

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

2010年1月24日 12:20

wocsok
1130
0 0 0

添加评论

0 0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>特效代码:弹出一个淡入淡出的提示框</title>
<SCRIPT>
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';
}
}
}
</SCRIPT>
</head>
<body>
<table width=80% ID="Table1"><tr><td>效果二：淡入淡出的弹出消息<br><input type=button onclick="startObjMessage('objDiv')" value="点击弹出消息" ID="Button1" NAME="Button1"></td>
</tr>
<tr><td><DIV id="objDiv" style="DISPLAY: none; Z-INDEX: 1; POSITION: absolute; ">
<img src="http://www.chinaz.com/upimg/litimg/080522/013550264J3.gif">测试效果<img src="http://www.chinaz.com/upimg/litimg/080522/013550264J3.gif"></DIV></td></tr>
</table>
</body>
</html>

2010年1月24日 11:57