jquery实例1:淡入淡出窗口


1.html代码:

window.html源代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>jquery实例1:深入浅出窗口</title>

		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
		<script type="text/javascript" src="js/jquerywin.js"></script>
		<link href="css/win.css" rel="stylesheet" type="text/css" />

	</head>

	<body>
		<a onclick="showwin()" href="#">显示浮动窗口</a>
		<div id="win">
			<div id="title">
				我是标题栏!!
				<span id="close" onclick="hide()">X</span>
			</div>
			<div id="content">
				我是一个窗口哦!!
			</div>
		</div>
	</body>
</html>


2.javascript代码:

jquerywin.js源代码:
function showwin() {

	//使用纯javascript来控制css
	//var winNode = document.getElementById("win");
	//winNode.style.display = "block";
	
	//方法1,修改节点的css值,让窗口显示出来
	//$("#win").css("display", "block");
	//方法2,利用Jquery的show方法
	//$("#win").show("normal");
	//方法3,利用Jquery的fadeIn方法
	$("#win").fadeIn("slow");
}

function hide() {
	//将窗口隐藏起来
	//注意,这里的隐藏方法与前面的显示方法需要一一对应,
	//比如你使用方法一显示窗口,那么也要使用方法一进行隐藏
	//方法1,修改css
	//$("#win").css("display", "none");
	//方法2,利用hide方法
	//$("#win").hide("slow");
	//方法3,利用fadeOut方法
	$("#win").fadeOut("slow");
}


3.css代码:

win.css源代码:

/*id选择器*/
#win {
	/*希望窗口有边框*/
	border: 1px red solid;
	width: 300px;
	height: 250px;
	position: absolute;
	top: 100px;
	left: 200px;
	/*希望窗口开始时不可见*/
	display: none;
}

/*控制标题栏的样式*/
#title {
	/*背景色*/
	background-color: blue;
	/*文字颜色*/
	color: yellow;
	/*左内边距*/
	padding-left: 3px;
}

/*控制内容区域的样式*/
#content {
	padding-top: 30px;
	padding-left: 5px;
}

/*控制关闭按钮的位置*/
#close {
	/*使关闭按钮向右侧移动*/
	margin-left: 155px;
	/*让鼠标进入时可以显示小手,告知用户可以点击操作*/
	cursor: pointer;
}




ok,所有代码已经完毕,现在看一下效果图吧

jquery实例1:淡入淡出窗口

你可能感兴趣的:(JavaScript,html,jquery,css)