(*´∇｀*)白筱の猫舍

java开发实战(第十七天)

  • ~5.23K 字

css动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/* 	
	基本
	show([speed,[easing],[fn]]) 
	hide([speed,[easing],[fn]]) 
	toggle([speed],[easing],[fn]) 
	滑动
	slideDown([spe],[eas],[fn]) 
	slideUp([speed,[easing],[fn]]) 
	slideToggle([speed],[easing],[fn]) 
	淡入淡出
	fadeIn([speed],[eas],[fn]) 
	fadeOut([speed],[eas],[fn]) 
	fadeTo([[spe],opa,[eas],[fn]]) 
	fadeToggle([speed,[eas],[fn]])
	*/
	$(function(){
		//显示   show()
		$("#btn1").click(function(){
			$("#div1").show(1000);
		});		
		//隐藏  hide()
		$("#btn2").click(function(){
			$("#div1").hide(1000);
		});	
		//切换   toggle()
		$("#btn3").click(function(){
			$("#div1").toggle(1000);
		});	
		
		
		//淡入   fadeIn()
		$("#btn4").click(function(){
			$("#div1").fadeIn(500);
		});	
		//淡出  fadeOut()
		$("#btn5").click(function(){
			$("#div1").fadeOut(500);
		});	
		
		//淡化到  fadeTo()
		$("#btn6").click(function(){
			$("#div1").fadeTo("slow",Math.random());
		});	
		//淡化切换  fadeToggle()
		$("#btn7").click(function(){
			$("#div1").fadeToggle("slow","linear");
		});	
	})

精选

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>品牌展示练习</title>
		<style type="text/css">
			*{ margin:0; padding:0;}
			body {font-size:12px;text-align:center;}
			a { color:#04D; text-decoration:none;}
			a:hover { color:#F50; text-decoration:underline;}
			.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
			.SubCategoryBox ul { list-style:none;}
			.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
			.showmore { clear:both; text-align:center;padding-top:10px;}
			.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
			
			.showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;}
			
			.promoted a { color:#F50;}
		</style>
		<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				var category = $("ul:first li:gt(5):not(:last)");
				category.hide();
				
				var $promoptedCategory = $("ul:first li").filter(":contains('佳能'), :contains('尼康'), :contains('奥林巴斯')");
				
				$(".showmore a").click(function(){
					if(category.is(":hidden")){
						category.show();
						$promoptedCategory.addClass("promoted");
						$(".showmore a span").text("显示精简品牌")
											 .css("background", "url(img/up.gif) no-repeat 0 0");
					}else{
						category.hide();
						$promoptedCategory.removeClass("promoted");
						$(".showmore a span").text("显示全部品牌")
											 .css("background", "url(img/down.gif) no-repeat 0 0");
					}
					
					return false;
				});
			});
		</script>
	</head>
	<body>
		<div class="SubCategoryBox">
			<ul>
				<li ><a href="#">佳能</a><i>(30440) </i></li>
				<li ><a href="#">索尼</a><i>(27220) </i></li>
				<li ><a href="#">三星</a><i>(20808) </i></li>
				<li ><a href="#">尼康</a><i>(17821) </i></li>
				<li ><a href="#">松下</a><i>(12289) </i></li>
				<li ><a href="#">卡西欧</a><i>(8242) </i></li>
				<li ><a href="#">富士</a><i>(14894) </i></li>
				<li ><a href="#">柯达</a><i>(9520) </i></li>
				<li ><a href="#">宾得</a><i>(2195) </i></li>
				<li ><a href="#">理光</a><i>(4114) </i></li>
				<li ><a href="#">奥林巴斯</a><i>(12205) </i></li>
				<li ><a href="#">明基</a><i>(1466) </i></li>
				<li ><a href="#">爱国者</a><i>(3091) </i></li>
				<li ><a href="#">其它品牌相机</a><i>(7275) </i></li>
			</ul>
			<div class="showmore">
				<a href="more.html"><span>显示全部品牌</span></a>
			</div>
		</div>
	</body>
</html>
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可
,