首页 > 语言 > JavaScript > 正文

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

2024-05-06 16:19:03
字体：大 中 小
来源：转载
供稿：网友

这篇文章主要介绍了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程序设计有所帮助。

上一篇：jQuery实现鼠标悬停显示提示信息窗口的方法

下一篇：jquery中$each()方法的使用指南

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
学习交流
更多

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...
热门图片
更多
猜你喜欢的新闻
猜你喜欢的关注

新闻热点

英伟达市值一夜大涨9246亿 创2023年5月以来最大单周涨幅
2024-04-27 13:35:46
雷军：小米正在申请3万件专利，以提升自身的竞争力
2024-04-27 13:33:47
人参泡酒15年后竟“复活”？网友：这酒还能喝不？
2024-04-24 22:53:44
芯片股普涨！英伟达市值一夜大涨6000亿元
2024-04-23 19:32:50
面馆老板1天卖100碗刚够交房租 要卖到150碗才能实现盈利
2024-04-23 19:25:50
跌近30%！茶百道上市一小时跌没3年净利润
2024-04-23 19:13:19

疑难解答

图片精选

网友关注

关于本站 - 网上投稿 - 商务合作 - 隐私政策 - 网站地图
Copyright © 2008 - 2024 VEVB.COM. All Rights Reserved.武林网 版权所有