AJAX(jquery)实现窗口的淡入淡出

songwensheng · 发表于 2013-2-7 22:36:39

1.在WebRoot目录下新建css文件夹jqueryLib文件夹
2.在css文件夹下新建win.css代码如下：
/*id选择器*/
#win {
/*希望窗口有边框*/
border: 1px red solid;
/*希望窗口宽度和高度固定*/
width: 300px;
height: 200px;
/*控制窗口的位置*/
position: absolute; /*绝对定位*/
top: 100px;
left: 400px;
/*设置不可见*/
display: none;
}
/*控制标题栏的样式*/
#title {
/*控制标题栏的背景颜色*/
background-color: blue;
/*控制标题栏中文字的颜色*/
color: yellow;
/*控制标题栏的左内边距*/
padding-left: 3px;
}
#content {
   padding-left: 3px;
   padding-top: 5px;
}
/*控制关闭按钮的位置*/
#close {
/*使关闭按钮向右移动*/
margin-left: 240px;
/*让鼠标进入显示小手告诉用户可以点击*/
cursor: pointer;
}
静态页面jqueryWindow.html代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Jquery范例：浮动窗口</title>
    <script type="text/javascript" src="jqueryLib/jquery-1.4.1.js"></script>
    <script type="text/javascript" src="jqueryLib/jqueryWin.js"></script>
    <link type="text/css" rel="stylesheet" href="css/win.css" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<a  href="#">显示浮动窗口</a>


<div id="win">
   <div id="title">标题栏<span id="close" >X</span></div>
   <div id="content">内容区域（我是一个窗口）</div>
</div>
</body>
</html>
jqueryWin.js脚本代码如下：
//显示浮动窗口的方法
function showwin() {
//1.找到窗口对应的div节点
var winNode = $("#win");
//2.让div的窗口显示出来
//方法1，修改节点的css值让窗口显示出来
//winNode.css('display','block');
//方法2.利用jquery的show方法
//winNode.show('slow');
//方法3.利用jquery的fadeIn方法淡入
winNode.fadeIn("slow");

}
//隐藏窗口方法
function hide() {
//1.找到对应的节点
var winNode = $("#win");
//2.将窗口隐藏
//方法1.css方式
//winNode.css("display","none");
//方法2.jquery的hide方法
//winNode.hide("slow");
//方法3.利用jquery的fadeOut方法
winNode.fadeOut("slow");
}
测试即可！

		自动登录	找回密码
密码			立即注册