JQuery实现淡入淡出的消息框

long546324

浏览: 207174 次
性别:
来自: 云南

最近访客更多访客>>

mzguodong

as84568326

扁舟垂钓

gxpcw

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JQuery

jQuery CSS QQ JavaScript XHTML

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文件

#win
{
	border:solid 1px red;
	height:150px;
	width:200px;
	position:absolute;
	top:150px;
	left:350px;
	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(){    
    $("#btnShow").click(showwin);
    $("#close").click(hide);
});

function showwin(){
    //找到所对应的div节点
    var win=$("#win");
    //让该窗口显示出来
    //方法一：修改css属性
    // win.css("display","block");
    
    //方法二：利用jquery中的show方法
    //win.show(1000);
    
    //方法三：利用jquery中的fadeIn方法
    win.fadeIn("slow");
    
}

function hide()
{
    //找到所对应的div节点
    var win=$("#win");
    //让该窗口隐藏起来
    //方法一：修改css属性
    //win.css("display","none");
    
    //方法二：利用jquery中的hide方法
   // win.hide(1000);
    
    //方法三：利用jquery中的fadeOut方法
    win.fadeOut("slow");
}