Jquery淡入淡出的例子

jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>window show</title>    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link href="../css/win.css" rel="stylesheet" type="text/css"/>
  </head>
  <script type="text/javascript" src="../javascript/jquery.js"></script>
  <script type="text/javascript" src="../javascript/showwindow.js"></script>
  <body> 
    <a id="link" onclick="javascript:showWindow();" href="#">showWindow</a>
    <div id="win">
		<div id="title">标题<span id="close" onclick="javascript:hidden()">X</span></div>
		<div id="content">内容.........</div>
	</div>
  </body>
</html>

CSS
#win{
	border:1px red solid;
	width:300px;
	height:200px;
	position:absolute;
	top:100px;
	left:350px;
	display:none;
}
#title{
	background-color:blue;
	color:yellow;
	padding-left:3px;
}
#content{
	padding-left:3px;
	padding-top:5px;
}
#close{
	margin-left:245px;
	cursor:pointer;
}

JS
function showWindow(){
	//获得DIV
	var divWindow = $("#win");
	//divWindow.css("display","block");
	/**SHOW方法
	divWindow.show(4000,function(){
		alert("over");
	});
	*/
	//淡入
	divWindow.fadeIn("slow");
	//$("#link").fadeOut("slow");
	//淡出
	//divWindow.fadeOut("slow");
}
function hidden(){
	//可以改CSS
	//也可以用$("#win").hide("slow")方法
	$("#win").fadeOut("slow");
	//$("#win").hide("slow");
	//$("#win").css("display","none");
	
	//当DOM载入就绪可以查询及操纵时绑定一个要执行的函数
	$("document").ready(
		function(){
			
		}
	);
	//$("ul")这个是按标签去查的,不用加#
	//$(this)当前节点
	//$("p").toggle()如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
	//$("div > p");找到所有 p 元素,并且这些元素都必须是 div 元素的子元素。	
}

你可能感兴趣的:(html,jquery,jsp,css)