3.8CSS样式操作CSS样式操作：1、 addClass() 添加样式；2、 removeClass() 删除样式；3、 toggleClass() 有就删除，没有就添加样式；4、 offset() 获取和设置元素的坐标。3.9JQuery动画基本动画：1、 show() 将隐藏的元素显示；2、 hide() 将可见的元素隐藏；3、 toggle() 可见就隐藏，不可见就显示。以上动画方法都可以添加参数：1、 第一个参数是动画 执行的时长，以毫秒为单位；2、 第二个参数是动画的回
3.8CSS样式操作
CSS样式操作：
1、 addClass() 添加样式；
2、 removeClass() 删除样式；
3、 toggleClass() 有就删除，没有就添加样式；
4、 offset() 获取和设置元素的坐标。
3.9JQuery动画
基本动画：
1、 show() 将隐藏的元素显示；
2、 hide() 将可见的元素隐藏；
3、 toggle() 可见就隐藏，不可见就显示。
以上动画方法都可以添加参数：
1、 第一个参数是动画 执行的时长，以毫秒为单位；
2、 第二个参数是动画的回调函数 (动画完成后自动调用的函数)。
淡入淡出动画
1、 fadeIn() 淡入（慢慢可见）；
2、 fadeOut() 淡出（慢慢消失）；
3、 fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。0 透明，1 完成可见，0.5 半透明；
4、 fadeToggle() 淡入/淡出 切换。
使用JQuery动画实现品牌展示效果，要求：
1、 点击按钮的时候，隐藏和显示卡西欧之后的品牌；
2、 当显示全部内容的时候，按钮文本为“显示精简品牌” 然后，小三角形向上。所有品牌产品为默认颜色；
3、 当只显示精简品牌的时候，要隐藏卡西欧之后的品牌，按钮文本为“显示全部品牌” 然后小三形向下。并且把佳能，尼康的品牌颜色改为红色（给 li 标签添加 promoted 样式即可）
品牌展示效果的实现：
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3. <html xmlns="http://www.w3.org/1999/xhtml">
4. <head>
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
6. <title>品牌展示练习</title>
7. <style type="text/css">
8. * {
9. margin: 0;
10. padding: 0;
11. }
12.
13. body {
14. font-size: 12px;
15. text-align: center;
16. }
17.
18. a {
19. color: #04D;
20. text-decoration: none;
21. }
22.
23. a:hover {
24. color: #F50;
25. text-decoration: underline;
26. }
27.
28. .SubCategoryBox {
29. width: 600px;
30. margin: 0 auto;
31. text-align: center;
32. margin-top: 40px;
33. }
34.
35. .SubCategoryBox ul {
36. list-style: none;
37. }
38.
39. .SubCategoryBox ul li {
40. display: block;
41. float: left;
42. width: 200px;
43. line-height: 20px;
44. }
45.
46. .showmore, .showless {
47. clear: both;
48. text-align: center;
49. padding-top: 10px;
50. }
51.
52. .showmore a, .showless a {
53. display: block;
54. width: 120px;
55. margin: 0 auto;
56. line-height: 24px;
57. border: 1px solid #AAA;
58. }
59.
60. .showmore a span {
61. padding-left: 15px;
62. background: url(img/down.gif) no-repeat 0 0;
63. }
64.
65. .showless a span {
66. padding-left: 15px;
67. background: url(img/up.gif) no-repeat 0 0;
68. }
69.
70. .promoted a {
71. color: #F50;
72. }
73. </style>
74. <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
75. <script type="text/javascript">
76. $(function () {//页面加载完成之后
77. //实现页面的初始状态
78. $("li:gt(5):not(:last)").hide();
79.
80. //实现显示全部品牌，如果当前已经是展示全部品牌，那么就进行缩放
81. $("div div a").click(function () {
82. $("li:gt(5):not(:last)").toggle();//如果是显示就隐藏，如果是隐藏就显示
83.
84. //如果是向下展示全部品牌
85. if ($("li:gt(5):not(:last)").is(":hidden")) {
86. $("div div a span").text("向下展示更多的品牌");
87. $("div div").removeClass();
88. $("div div").addClass("showmore");
89.
90. //添加高亮
91. $("li:contains('明基')").removeClass("promoted");
92. $("li:contains('索尼')").removeClass("promoted");
93. } else {
94. $("div div a span").text("向上展示精简的品牌");
95. $("div div").removeClass();
96. $("div div").addClass("showless");
97.
98. //取消高亮
99. $("li:contains('明基')").addClass("promoted");
100. $("li:contains('索尼')").addClass("promoted");
101. }
102. return false;//取消标签的默认样式
103. })
104. });
105. </script>
106. </head>
107. <body>
108. <div class="SubCategoryBox">
109. <ul>
110. <li><a href="#">佳能</a><i>(30440) </i></li>
111. <li><a href="#">索尼</a><i>(27220) </i></li>
112. <li><a href="#">三星</a><i>(20808) </i></li>
113. <li><a href="#">尼康</a><i>(17821) </i></li>
114. <li><a href="#">松下</a><i>(12289) </i></li>
115. <li><a href="#">卡西欧</a><i>(8242) </i></li>
116. <li><a href="#">富士</a><i>(14894) </i></li>
117. <li><a href="#">柯达</a><i>(9520) </i></li>
118. <li><a href="#">宾得</a><i>(2195) </i></li>
119. <li><a href="#">理光</a><i>(4114) </i></li>
120. <li><a href="#">奥林巴斯</a><i>(12205) </i></li>
121. <li><a href="#">明基</a><i>(1466) </i></li>
122. <li><a href="#">爱国者</a><i>(3091) </i></li>
123. <li><a href="#">其它品牌相机</a><i>(7275) </i></li>
124. </ul>
125. <div class="showmore">
126. <a href="more.html"><span>显示全部品牌</span></a>
127. </div>
128. </div>
129. </body>
130. </html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
