jQuery层动画定位滑动效果的方法

这篇文章主要介绍了jQuery层动画定位滑动效果的方法,涉及jQuery中animate方法的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了jQuery层动画定位滑动效果的方法。分享给大家供大家参考。具体实现方法如下：

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. <title>jQuery层动画定位滑动</title> 
6. <style type="text/css"> 
7. <!-- 
8. body { 
9. font-family: 'Signika Negative', sans-serif; 
10. } 
11. #head { 
12. z-index:10; 
13. position:absolute; 
14. top:0; 
15. left:0; 
16. width:100%; 
17. height:30px; 
18. border-color:#0055ff; 
19. border-width:0 0 10px 0; 
20. border-style:solid; 
21. background:#0088ff; 
22. } 
23. #head li{ 
24. list-style:none; 
25. float:left; 
26. display:block; 
27. height:30px; 
28. padding:0 10px; 0 10px; 
29. cursor:pointer; 
30. font-size:26px; 
31. } 
32. #head li:hover{ 
33. color:#ffffff; 
34. background:#0055ff; 
35. border-color:#0011ff; 
36. border-width:0 0 10px 0; 
37. border-style:solid; 
38. } 
39. #box { 
40. position:absolute; 
41. top:0; 
42. left:0; 
43. width:100%; 
44. height:100%; 
45. overflow:hidden; 
46. } 
47. #bg { 
48. position:absolute; 
49. top:0; 
50. left:0; 
51. width:100%; 
52. height:100%; 
53. overflow:visible; 
54. background:; 
55. } 
56. .cell { 
57. width:100%; 
58. height:100%; 
59. overflow:auto; 
60. } 
61. .list { 
62. position:absolute; 
63. top:50%; 
64. left:50%; 
65. width:800px; 
66. height:600px; 
67. margin:-300px 0 0 -400px; 
68. background:#0088ff; 
69. } 
70. #class_1 { 
71. position:absolute; 
72. top:0; 
73. left:0; 
74. background:; 
75. } 
76. #class_2 { 
77. position:absolute; 
78. top:0; 
79. left:100%; 
80. background:; 
81. } 
82. #class_3 { 
83. position:absolute; 
84. top:0; 
85. left:200%; 
86. background:; 
87. } 
88. #class_4 { 
89. position:absolute; 
90. top:100%; 
91. left:0; 
92. background:; 
93. } 
94. #class_5 { 
95. position:absolute; 
96. top:100%; 
97. left:100%; 
98. background:; 
99. } 
100. #class_6 { 
101. position:absolute; 
102. top:100%; 
103. left:200%; 
104. background:; 
105. } 
106. #class_7 { 
107. position:absolute; 
108. top:200%; 
109. left:0; 
110. background:; 
111. } 
112. #class_8 { 
113. position:absolute; 
114. top:200%; 
115. left:100%; 
116. background:; 
117. } 
118. #class_9 { 
119. position:absolute; 
120. top:200%; 
121. left:200%; 
122. background:; 
123. } 
124. --> 
125. </style> 
126. <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>  
127. <script type="text/javascript"> 
128. $(document).ready(function() 
129. { 
130. $("#l_01").click(function(){ 
131. $("#bg").stop().animate({top:0+"%",left:0+"%"},"slow"); 
132. }); 
133. $("#l_02").click(function(){ 
134. $("#bg").stop().animate({top:0+"%",left:-100+"%"},"slow"); 
135. }); 
136. $("#l_03").click(function(){ 
137. $("#bg").stop().animate({top:0+"%",left:-200+"%"},"slow"); 
138. }); 
139. $("#l_04").click(function(){ 
140. $("#bg").stop().animate({top:-100+"%",left:0+"%"},"slow"); 
141. }); 
142. $("#l_05").click(function(){ 
143. $("#bg").stop().animate({top:-100+"%",left:-100+"%"},"slow"); 
144. }); 
145. $("#l_06").click(function(){ 
146. $("#bg").stop().animate({top:-100+"%",left:-200+"%"},"slow"); 
147. }); 
148. $("#l_07").click(function(){ 
149. $("#bg").stop().animate({top:-200+"%",left:0+"%"},"slow"); 
150. }); 
151. $("#l_08").click(function(){ 
152. $("#bg").stop().animate({top:-200+"%",left:-100+"%"},"slow"); 
153. }); 
154. $("#l_09").click(function(){ 
155. $("#bg").stop().animate({top:-200+"%",left:-200+"%"},"slow"); 
156. }); 
157. }); 
158. </script> 
159. </head> 
160. <body> 
161. <div id="head"> 
162. <li id="l_01">1</li> 
163. <li id="l_02">2</li> 
164. <li id="l_03">3</li> 
165. <li id="l_04">4</li> 
166. <li id="l_05">5</li> 
167. <li id="l_06">6</li> 
168. <li id="l_07">7</li> 
169. <li id="l_08">8</li> 
170. <li id="l_09">9</li> 
171. </div> 
172. <div id="box"> 
173. <div id="bg"> 
174. <div class="cell" id="class_1"> 
175. <div class="list"></div> 
176. </div> 
177. <div class="cell" id="class_2"> 
178. <div class="list"></div> 
179. </div> 
180. <div class="cell" id="class_3"> 
181. <div class="list"></div> 
182. </div> 
183. <div class="cell" id="class_4"> 
184. <div class="list"></div> 
185. </div> 
186. <div class="cell" id="class_5"> 
187. <div class="list"></div> 
188. </div> 
189. <div class="cell" id="class_6"> 
190. <div class="list"></div> 
191. </div> 
192. <div class="cell" id="class_7"> 
193. <div class="list"></div> 
194. </div> 
195. <div class="cell" id="class_8"> 
196. <div class="list"></div> 
197. </div> 
198. <div class="cell" id="class_9"> 
199. <div class="list"></div> 
200. </div> 
201. </div> 
202. </div> 
203. </body> 
204. </html> 

希望本文所述对大家的jQuery程序设计有所帮助。