jQuery简单的动画跳动菜单

MemacX

jQuery简单的动画跳动菜单

HTML:

1. <div id="lava">
   
2. <ul>
   
3. <li><a href="#">home</a></li>
   
4. <li><a href="#">lava lamp menu</a></li>
   
5. <li><a href="#">queness.com</a></li>
   
6. <li class="selected"><a href="#">jQuery</a></li>
   
7. </ul>
   
8. <!-- If you want to make it even simpler, you can append these html using jQuery -->
   
9. <div id="box"><div class="head"></div></div>
   
10. </div>

复制代码

CSS:

1. body {
   
2. font-family:georgia;
   
3. font-size:14px;
   
4. }
   
5. a {
   
6. text-decoration:none;
   
7. color:#333;
   
8. }
   
9. #lava {
   
10. /* you must set it to relative, so that you can use absolute position for children elements */
    
11. position:relative;
    
12. text-align:center;
    
13. width:583px;
    
14. height:40px;
    
15. }
    
16. #lava ul {
    
17. /* remove the list style and spaces*/
    
18. margin:0;
    
19. padding:0;
    
20. list-style:none;
    
21. display:inline;
    
22. 
    
23. /* position absolute so that z-index can be defined */
    
24. position:absolute;
    
25. 
    
26. /* center the menu, depend on the width of you menu*/
    
27. left:110px;
    
28. top:0;
    
29. 
    
30. /* should be higher than #box */
    
31. z-index:100;
    
32. }
    
33. #lava ul li {
    
34. 
    
35. /* give some spaces between the list items */
    
36. margin:0 15px;
    
37. 
    
38. /* display the list item in single row */
    
39. float:left;
    
40. }
    
41. #lava #box {
    
42. 
    
43. /* position absolute so that z-index can be defined and able to move this item using javascript */
    
44. position:absolute;
    
45. left:0;
    
46. top:0;
    
47. 
    
48. /* should be lower than the list menu */
    
49. z-index:50;
    
50. /* image of the right rounded corner */
    
51. background:#ccc;
    
52. height:20px;
    
53. 
    
54. /* add padding 8px so that the tail would appear */
    
55. padding-right:8px;
    
56. 
    
57. /* self-adjust negative margin to make sure the box display in the center of the item */
    
58. margin-left:-10px;
    
59. }
    
60. #lava #box .head {
    
61. /* image of the left rounded corner */
    
62. background:#eee;
    
63. height:20px;
    
64. /* self-adjust left padding to make sure the box display in the center of the item */
    
65. padding-left:10px;
    
66. }
    
67. 
    
68. jQuery:
    
69. $(document).ready(function () {
    
70. //transitions
    
71. //for more transition, goto http://gsgd.co.uk/sandbox/jquery/easing/
    
72. var style = 'easeOutElastic';
    
73. 
    
74. //Retrieve the selected item position and width
    
75. var default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
    
76. var default_width = $('#lava li.selected').width();
    
77. //Set the floating bar position and width
    
78. $('#box').css({left: default_left});
    
79. $('#box .head').css({width: default_width});
    
80. //if mouseover the menu item
    
81. $('#lava li').hover(function () {
    
82. 
    
83. //Get the position and width of the menu item
    
84. left = Math.round($(this).offset().left - $('#lava').offset().left);
    
85. width = $(this).width();
    
86. //Set the floating bar position, width and transition
    
87. $('#box').stop(false, true).animate({left: left},{duration:1000, easing: style});
    
88. $('#box .head').stop(false, true).animate({width:width},{duration:1000, easing: style});
    
89. 
    
90. //if user click on the menu
    
91. }).click(function () {
    
92. 
    
93. //reset the selected item
    
94. $('#lava li').removeClass('selected');
    
95. 
    
96. //select the current item
    
97. $(this).addClass('selected');
    
98. });
    
99. 
    
100. //If the mouse leave the menu, reset the floating bar to the selected item
     
101. $('#lava').mouseleave(function () {
     
102. //Retrieve the selected item position and width
     
103. default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
     
104. default_width = $('#lava li.selected').width();
     
105. 
     
106. //Set the floating bar position, width and transition
     
107. $('#box').stop(false, true).animate({left: default_left},{duration:1500, easing: style});
     
108. $('#box .head').stop(false, true).animate({width:default_width},{duration:1500, easing: style});
     
109. 
     
110. });
     
111. 
     
112. });
     

复制代码

在线演示http://www.aspxcs.net/index.php?m=content&c=index&a=down_file&id=525

本地下载http://www.aspxcs.net/index.php?m=content&c=down&a_k=f674A1ZSAgcHBQMABgBQVgFTBlcMCAtTBlJXUFZdCAYHAkRAW0RfCgYTVQ1eRBIRWR1LEUJHHFFCFBpWRBpbVkEYF0MKDVNTUVxfVRkCVlBSHVVXBwQdAgFVUwQGBgECBQVTA1FbAA4ZT1pAEFRbUEVfCwJQXFtUDFZEVlZAXFcIAA