jquery实例1:淡入淡出窗口

最新推荐文章于 2022-04-25 16:42:34 发布

cheney_0723

最新推荐文章于 2022-04-25 16:42:34 发布

阅读量114

点赞数

分类专栏： jquery 文章标签： jQuery CSS JavaScript HTML ViewUI

本文链接：https://blog.csdn.net/mr_cheney/article/details/83670571

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>

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

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

ok,所有代码已经完毕，现在看一下效果图吧

[img]http://dl.iteye.com/upload/attachment/278737/da888584-4b1d-3a51-8f67-4be48247f806.jpg[/img]

cheney_0723

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实例1:淡入淡出窗口

1.html代码：window.html源代码：[code="html"] jquery实例1:深入浅出窗口显示浮动窗口我是标题栏！！ X 我是一个窗口哦！！ [/code]2.javascr...
复制链接

扫一扫

专栏目录