日期:2014-05-17  浏览次数:20694 次

AJAX学习总结(五)---窗口的淡入淡出和css学习

?

步骤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看到效果即可!!!