`
long546324
  • 浏览: 204278 次
  • 性别: Icon_minigender_1
  • 来自: 云南
社区版块
存档分类
最新评论

JQuery实现徐徐升起的qq消息框

QQjQueryCSSJavaScriptHTML 
阅读更多
index.html文件 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>徐徐升起的qq消息框</title>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/win.js" type="text/javascript"></script>
    <link type="text/css" rel="Stylesheet" href="css/win.css" />    
</head>
<body>
    <a id="btnShow" href="#">显示消息框</a>
    <div id="win">
        <div id="title">qq消息框<span id="close">　X</span></div>
        <div id="con"><a href="http://long546324.iteye.com">欢迎访问我的Blog</a></div>
    </div>
</body>
</html>


win.css文件 
html
{
	height: 100%;
}
#win
{
	border:solid 1px red;
	height:150px;
	width:200px;
	position:absolute;
	bottom: -150px;
	right:20px;
	display:none;
}
#title
{
	background-color:blue;
	color:yellow;
	padding-left:5px;
}
#title #close
{
	margin-left:100px;
	cursor:pointer;
}
#con
{
	padding:30px 0px 0px 30px;
}


win.js文件 

$(function(){    
	$("#win").css("opacity", 0);
    $("#btnShow").click(showwin);
    $("#close").click(hide);
});

function showwin(){
    //找到所对应的div节点
    var win=$("#win");
    //让该窗口显示出来    
    win.css("display","block");
     //从下往上慢慢升起
	win.animate({
        bottom: "-1px",
        opacity: 1
    },1000);
    
}

function hide()
{
    //找到所对应的div节点
    var win=$("#win");
    //让该窗口隐藏起来   
	win.animate({
        bottom: "-150px",
        opacity: 0
    },1000);		
}
分享到：
| JQuery实现淡入淡出的消息框
评论
9 楼 gushou 2010-07-15  
不错,刚学jquery,参考一下
8 楼 freshman008 2010-06-17  
思路不错
感谢
7 楼 laoqian9527 2010-06-08  
下来看看！
6 楼 wangtong40 2010-06-02  
还是不错的，最近正需要类似的消息提示框
5 楼 chainhou 2010-05-29  
挺好，呵呵
4 楼 wojiaojiangnan 2009-08-20  
不是很好看，但感觉还是蛮好的
3 楼 yzjiang8888 2009-08-01  
正好用得上，谢了
2 楼 long546324 2009-07-24  
非常感谢你的提醒，我这就去处理一下  呵呵
1 楼 you 2009-07-24  
隐藏后滚动条要处理一下，可以做得更好看一点
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics