index.html文件
win.css文件
win.js文件
<!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);
}
