AJAX学习小结（五）-窗口的淡入淡出和css学习
日期：2014-05-17 浏览次数：20717 次
?
步骤1.新建项目JqueryTrain
?
步骤2.在WebRoot下新建jslib文件夹，并将jquery类库导入进来
?
步骤3.新建html文件---JqueryWindow.html
?
?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>窗口的淡入淡出</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入css文件 -->
<link rel="stylesheet" type="text/css" href="css/win.css">
<!-- 引入js文件 -->
<script type="text/javascript" src="jslib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jslib/jquerywin.js"></script>
</head>
<body>
<a onclick="showwin()" href="#">显示一个窗口</a>
<div id="win">
<div id="title">我是标题栏啊！<span onclick="hide()" id="close">X</span></div>
<div id="content">我是一个窗口哦！！！</div>
</div>
</body>
</html>
?
?
?
步骤4.在jslib下新建js文件---jquerywin.js
?
?//显示浮动窗口的方法
function showwin(){
//alert("准备完成！！！");
//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,找到窗口对应的div节点
var winNode = $("#win");
//2,让div对应的窗口隐藏，对应上面的显示方法有3种隐藏方法
//方法1,修改css
//winNode.css("display","none");
//方法2,利用jquery的hide方法
//winNode.hide("slow");
//方法3,利用jquery的fadeOut方法
winNode.fadeOut("slow");
}
?
?
?
步骤5.在WebRoot下新建css文件夹，并新建css文件---win.css
?
?/*id选择器*/
#win{
/*希望窗口有边框*/
border: 1px solid red;
/*希望窗口宽度和高度固定，不要太大*/
width: 300px;
height: 200px;
/*希望控制窗口的位置*/
position: absolute; /*绝对定位*/
top: 100px;
left: 350px;
/*希望窗口开始时不可见*/
display: none;
}
/*控制标题栏的样式*/
#title{
/*控制标题栏的背景色*/
background-color: blue;
/*控制标题栏中文字的颜色*/
color: yellow;
/*控制标题栏的左内边距*/
padding-left: 3px;
padding-top: 2px;
height: 25px;
}
/*控制内容栏的样式*/
#content{
padding-top: 10px;
padding-left: 10px;
}
/*控制隐藏按钮的样式*/
#close{
/*使关闭按钮向右侧移动*/
margin-left: 158px;
/*让鼠标进入时可以显示小手，告知用户可以点击操作*/
cursor: pointer;
}
?
?
?
然后测试运行http://localhost:8080/JqueryTrain/JqueryWindow.html看到效果即可！！！
