AJAX学习总结（五）---窗口的淡入淡出和css学习-优快云博客

本文链接：https://blog.youkuaiyun.com/LC2586/article/details/83678672

步骤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 οnclick="showwin()" href="#">显示一个窗口</a>
    <div id="win">
    	<div id="title">我是标题栏啊！<span οnclick="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看到效果即可！！！