关闭

jquery事件练习

标签: jqueryfunctionbuttonjavascriptinputdiv
387人阅读 评论(1) 收藏 举报
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<script type="text/javascript" language="JavaScript" src="../include/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" language="JavaScript">
			
			$(document).ready(function(){
				
				$("#btn0").click(function(){
					
					$("#toggl").toggle("slow");
					

				});
				
				$("#btn1").click(function(){
					
					$("#toggl").slideToggle("slow");
					
				});
				
				
				$("#btn2").click(function(){
					
					$("#toggl").fadeIn("slow");
					
				});

				$("#btn3").click(function(){
					
					$("#toggl").fadeOut("slow");
					
				});
				
				$("#btn4").hover(function(){
					
					$("#toggl").fadeOut("slow");
					
				},function(){
					
					$("#toggl").fadeIn("slow");
				});

				$("#btn5").toggle(function(){
					
					//使用toggle
					$("#toggl").toggle("slow");
					
				},function(){
					//滑动效果
					$("#toggl").slideToggle("slow");
					
				},function(){
					//淡出
					$("#toggl").fadeOut("slow");
									
				},function(){
					//淡入
					$("#toggl").fadeIn("slow");
					
				});
				

			});
			
			
		</script>
		
		
	</head>
	<body>
		
		<div id="toggl" style="width:100px; height:80px; background-color:#95b3d7"></div>
		
		<input type="button" id="btn0" value="显示/隐藏div">
		
		<input type="button" id="btn1" value="div滑动效果">
		
		<input type="button" id="btn2" value="div淡入">
		<input type="button" id="btn3" value="div淡出">
		
		<input type="button" id="btn4" value="使用hover事件执行淡入淡出">
		
		<input type="button" id="btn5" value="toggle效果集合">
		
	</body>
</html>


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:113600次
    • 积分:1991
    • 等级:
    • 排名:千里之外
    • 原创:88篇
    • 转载:16篇
    • 译文:0篇
    • 评论:13条
    最新评论