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