JQuery实现淡入淡出的消息框

最新推荐文章于 2021-06-03 02:35:48 发布

彦雷

最新推荐文章于 2021-06-03 02:35:48 发布

阅读量206

点赞数

分类专栏： JQuery 文章标签： jQuery CSS QQ JavaScript XHTML ViewUI

JQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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");
}