jquery实例1:淡入淡出窗口

Mr.Cheney

浏览: 221942 次
性别:
来自: 武汉

最近访客更多访客>>

wyk525

Union365

q4421

wuxia_2001

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery

jQuery CSS JavaScript HTML

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,所有代码已经完毕，现在看一下效果图吧