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

JQuery实现淡入淡出的消息框

jQueryCSSQQJavaScriptXHTML 
阅读更多
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");
}
1
顶
0
踩
分享到：
| .NET中GridView实现自动编号
评论
发表评论

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

相关推荐

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