jquery实例1:淡入淡出窗口

最新推荐文章于 2024-06-16 18:09:06 发布

roger_lmj

最新推荐文章于 2024-06-16 18:09:06 发布

阅读量782

点赞数

分类专栏： JS/Ajax/Jquery/as 文章标签： jquery stylesheet javascript html css function

JS/Ajax/Jquery/as 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

1.html代码：

window.html源代码：

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 >

<!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 οnclick="showwin()" href="#">显示浮动窗口</a>
		<div id="win">
			<div id="title">
				我是标题栏！！
				<span id="close" οnclick="hide()">X</span>
			</div>
			<div id="content">
				我是一个窗口哦！！
			</div>
		</div>
	</body>
</html>

2.javascript代码：

jquerywin.js源代码：

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" );
}

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源代码：

Html代码

/*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;
}

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