html:
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>JQuery实例:浮动窗口</title>
<script type="text/javascript" src="jslib/jquerywin.js"></script>
<script type="text/javascript" src="jslib/jquery-3.1.1.js"></script>
<link href="css/win.css" rel="stylesheet" type="text/css">
</head>
<body>
<a onclick="showWin()" href="#">显示窗口</a>
<!--css改变div -->
<div id="win">我的窗口<span id="close" onclick ="hide()">X</span></div>
</body>
</html>
js:
function showWin(){
var winNode = $("#win");
//通过jqurey修改css
//winNode.css("display","block");
//使用jquery的show方法
winNode.fadeIn("slow");//淡入淡出fadeOut
//winNode.show(4000);
}
function hide(){
var Node = $("#win");
//Node.css("display","none");
Node.hide("slow");
//或者是fadeout淡出
}
css:
/*#id id选择器*/
#win{
border: #ff1719 1px solid;
border-radius:10px;/*控制高和宽*/
width: auto;
height: auto;
position: absolute;
top: 200px;
left: 200px;
display: none;
}
#close{
cursor:pointer;
}
原文地址：https://www.jb51.cc/ajax/161708.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
