在很多网页中都可以看到网页弹出的一个窗口，然后很多情况下面还会有淡入淡出的效果，下面我们就这个窗口的
淡入淡出效果来做一个例子，这个是使用jQuery来做的，其实非常简单。
首先看HTML代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>浮动窗口</title>
<script type="text/javascript" src="/Ajax/js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="/Ajax/js/win.js"></script>
<link rel="stylesheet" href="/Ajax/css/win.css" type="text/css"></link>
</head>
<body>
<a href="#" οnclick="showwin();">显示浮动窗口</a>
<div id="myWin">
<div id="title">我是标题栏<span id="span"><a href="#" οnclick="hello()">关闭</a></span></div>
<div id="content">我是一个窗口哦!!!</div>
</div>
</body>
</html>
然后再看JavaScript代码
//显示浮动窗口的方法
function showwin(){
//alert("hah");
//显示窗口
//$("#myWin").show("slow");
$("#myWin").fadeIn(3500);
}
function hello(){
$("#myWin").fadeOut(2000);
}剩下的就是CSS代码了
#myWin{
/*希望窗口有边框*/
border: 1px red solid;
width: 300px;
height: 200px;
/*控制窗口的位置*/
position: absolute;
top: 100px;
left: 350px;
display: none;
}
/*控制标题栏的背景色*/
#title{
background-color: yellow;
/*控制标题栏左内边距*/
padding-left: 3px;
}
#content{
padding-top: 5px;
padding-left: 5px;
}
#span{
padding-left: 180px;
}
a:LINK{
text-decoration: none;
}
a:HOVER {
color: red;
}效果还是很好的，而且很简单，
1426
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
