JQuery实现窗口淡入淡出
jquery.js
function showwin(){
var winNode=$("#win");
//方法一：使用jquery修改css
//winNode.css("display","block");
//方法二：使用jquery函数show（）
winNode.show("20");
//方法三：使用Jquery的fadeIn()方法
//winNode.fadeIn("slow");
}
function hide(){
var winNode=$("#win");
//winNode.css("display","none");
//winNode.hide("slow");
winNode.fadeOut("slow");
} jquery.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>float window</title>
<script type="text/javascript" src="jslib/jquerywin.js"></script>
<script type="text/javascript" src="jslib/jquery1.5.js"></script>
<link type="text/css" rel="stylesheet" href="css/win.css" />
</head>
<body>
<a onclick="showwin()" href="#">show float window</a>
<div id="win">
<div id="title">title<span id="close" onclick="hide()">X</span></div>
<div id="content"> this is a window！</div>
</div>
</body>
</html>win.css:
#win{
border:1px red solid;
width:300px;
height:200px;
position: absolute;
top:100px;
left:400px;
display:none;
}
#title{
background-color:blue;
color:yellow;
padding-left:3px;
}
#content{
padding-left:3px;
padding-top:3px;
}
#close{
margin-left:220px;
cursor:pointer;
} 相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17