javascript制作的滑动图片菜单

本文给大家分享的是一款javascript制作的很漂亮的js滑动导航菜单，鼠标经过立即快速滑动切换显示。有需要的小火把可以参考下。

方法很简单，特效非常棒，这里就先不多废话了，直接上代码

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
2. <html xmlns="http://www.w3.org/1999/xhtml"> 
3. <head> 
4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
5. <title>js滑动菜单</title> 
6. <style> 
7. * {margin:0; padding:0} 
8. .sm {list-style:none; width:459px; height:100px; display:block; overflow:hidden} 
9. .sm li {float:left; display:inline; overflow:hidden} 
10. </style> 
11. <script type="text/javascript"> 
12. var slideMenu=function(){ 
13. var sp,st,t,m,sa,l,w,sw,ot; 
14. return{ 
15. build:function(sm,sw,mt,s,sl,h){ 
16. sp=s; st=sw; t=mt; 
17. m=document.getElementById(sm); 
18. sa=m.getElementsByTagName('li'); 
19. l=sa.length; w=m.offsetWidth; sw=w/l; 
20. ot=Math.floor((w-st)/(l-1)); var i=0; 
21. for(i;i<l;i++){s=sa[i]; s.style.width=sw+'px'; this.timer(s)} 
22. if(sl!=null){m.timer=setInterval(function(){slideMenu.slide(sa[sl-1])},t)} 
23. }, 
24. timer:function(s){s.onmouseover=function(){clearInterval(m.timer);m.timer=setInterval(function() 
25.  
26.  
27. {slideMenu.slide(s)},t)}}, 
28. slide:function(s){ 
29. var cw=parseInt(s.style.width,'10'); 
30. if(cw<st){ 
31. var owt=0; var i=0; 
32. for(i;i<l;i++){ 
33. if(sa[i]!=s){ 
34. var o,ow; var oi=0; o=sa[i]; ow=parseInt(o.style.width,'10'); 
35. if(ow>ot){oi=Math.floor((ow-ot)/sp); oi=(oi>0)?oi:1; o.style.width=(ow-oi) 
36.  
37.  
38. +'px'} 
39. owt=owt+(ow-oi)}} 
40. s.style.width=(w-owt)+'px'; 
41. }else{clearInterval(m.timer)} 
42. } 
43. }; 
44. }(); 
45. </script> 
46. </head> 
47. <body onload="slideMenu.build('sm',200,10,10,1)"> 
48. <ul id="sm" class="sm"> 
49. <li><img src="1.gif" alt="" /></li> 
50. <li><img src="2.gif" alt="" /></li> 
51. <li><img src="3.gif" alt="" /></li> 
52. <li><img src="4.gif" alt="" /></li> 
53. </ul> 
54. </body> 
55. </html> 

再来一个网友实现的滑动菜单特效

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
2. <html xmlns="http://www.w3.org/1999/xhtml"> 
3. <head> 
4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
5. <title>js十分好看的滑动菜单效果。</title> 
6. <style type="text/css"> 
7. body{ 
8. margin:10px; 
9. padding:10px; 
10. } 
11. a:link { text-decoration: none;color: blue} 
12. a:active { text-decoration:blink} 
13. a:hover { text-decoration:underline;color: red} 
14. a:visited { text-decoration: none;color: green} 
15. body,td,div,span,li{ 
16. font-size:12px; 
17. } 
18. .title01,.title02{ 
19. color:#00b; 
20. font-weight:bold; 
21. } 
22. #DoorP{ 
23. width:200px; 
24. height:300px; 
25. padding:0px; 
26. background:#FFFCF2; 
27. overflow:hidden; 
28. } 
29. .title01{ 
30. width:100%; 
31. height:25px; 
32. background:#FFFCF2; 
33. cursor:pointer; 
34. } 
35. .title02{ 
36. width:100%; 
37. height:25px; 
38. background:#FFFCF2; 
39. cursor:pointer; 
40. } 
41. .zzjs__net{ 
42. background:#FFFCF2; 
43. border-bottom:2px solid #fff; 
44. overflow:hidden; 
45. color:#666; 
46. padding-left:4px; 
47. padding-right:4px; 
48. line-height:18px; 
49. } 
50. .www_zzjs_net { 
51. width:202px; 
52. } 
53. .www_zzjs_net .b1, .www_zzjs_net .b2, .www_zzjs_net .b3, .www_zzjs_net .b4 { 
54. font-size:1px; 
55. display:block; 
56. background:#FFFCF2; 
57. overflow: hidden; 
58. } 
59. .www_zzjs_net .b1, .www_zzjs_net .b2, .www_zzjs_net .b3 { 
60. height:1px; 
61. } 
62. .www_zzjs_net .b2, .www_zzjs_net .b3, .www_zzjs_net .b4 { 
63. background:#FFFCF2; 
64. border-left:1px solid #C7BC98; 
65. border-right:1px solid #C7BC98; 
66. } 
67. .www_zzjs_net .b1 { 
68. margin:0 4px; 
69. background:#C7BC98; 
70. } 
71. .www_zzjs_net .b2 { 
72. margin:0 2px; 
73. border-width:0 2px; 
74. } 
75. .www_zzjs_net .b3 { 
76. margin:0 1px; 
77. } 
78. .www_zzjs_net .b4 { 
79. height:2px; 
80. margin:0; 
81. } 
82. .www_zzjs_net .c1 { 
83. margin:0 5px; 
84. background:#C7BC98; 
85. } 
86. .www_zzjs_net .c2 { 
87. margin:0 3px; 
88. border-width:0 2px; 
89. } 
90. .www_zzjs_net .c3 { 
91. margin:0 2px; 
92. } 
93. .www_zzjs_net .c4 { 
94. height:2px; 
95. margin: 0 1px; 
96. } 
97. .www_zzjs_net .zzjs_net { 
98. display:block; 
99. background:transparent; 
100. border-left:1px solid #C7BC98; 
101. border-right:1px solid #C7BC98; 
102. font-size:0.9em; 
103. text-align:justify; 
104. } 
105. </style> 
106. </head> 
107. <body> 
108. <div class="www_zzjs_net"> 
109. <b class="b1 c1"></b> 
110. <b class="b2 c2"></b> 
111. <b class="b3 c3"></b> 
112. <b class="b4 c4"></b> 
113. <div class="zzjs_net"> 
114. <div id="DoorP"> 
115. <table> 
116. <tr> 
117. <td align="center"> 
118. 一号菜单 
119. </td> 
120. </tr> 
121. </table> 
122. <div class="zzjs__net" align="center"> 
123. <a href="#">一号分类</a><br/>二号分类<br/>三号分类<br/> 
124. </div> 
125. <b class="b1"></b> 
126. <b class="b2"></b> 
127. <b class="b3"></b> 
128. <b class="b4"></b> 
129. <table> 
130. <tr> 
131. <td align="center"> 
132. 二号菜单 
133. </td> 
134. </tr> 
135. </table> 
136. <div class="zzjs__net" align="center"> 
137. <a href="#">四号分类</a><br/>五号分类<br/>六号分类<br/> 
138. </div> 
139. <b class="b1"></b> 
140. <b class="b2"></b> 
141. <b class="b3"></b> 
142. <b class="b4"></b> 
143. <table> 
144. <tr> 
145. <td align="center"> 
146. 三号菜单 
147. </td> 
148. </tr> 
149. </table> 
150. <div class="zzjs__net" align="center"> 
151. <a href="#">七号分类</a><br/>八号分类<br/>九号分类<br/> 
152. </div> 
153. </div></div> 
154. <b class="b4 c4"></b> 
155. <b class="b3 c3"></b> 
156. <b class="b2 c2"></b> 
157. <b class="b1 c1"></b> 
158. <script type="text/javascript"> 
159. var open = 2; 
160. var openState = new Array(); 
161. var closeState = new Array(); 
162. var dH = 220; 
163. function $(id){ 
164. if(document.getElementById(id)) 
165. { 
166. return document.getElementById(id); 
167. } 
168. else 
169. { 
170. alert("没有找到!"); 
171. } 
172. } 
173. function $tag(id,tagName){ 
174. return $(id).getElementsByTagName(tagName) 
175. } 
176. function closeMe(Cid,Oid){ 
177. var h = parseInt(Ds[Cid].style.height); 
178. //alert(h); 
179. if(h > 2) 
180. { 
181. h = h - Math.ceil(h/3); 
182. Ds[Cid].style.height = h+"px"; 
183. } 
184. else 
185. { 
186. openMe(Oid); 
187. clearTimeout(closeState[Cid]); 
188. return false; 
189. } 
190. closeState[Cid] = setTimeout("closeMe("+Cid+","+Oid+")"); 
191. } 
192. function openMe(Oid){ 
193. var h = parseInt(Ds[Oid].style.height); 
194. //alert(h); 
195. if(h < dH) 
196. { 
197. h = h + Math.ceil((dH-h)/3); 
198. Ds[Oid].style.height = h+"px"; 
199. } 
200. else 
201. { 
202. clearTimeout(openState[Oid]); 
203. return false; 
204. } 
205. openState[Oid] = setTimeout("openMe("+Oid+")"); 
206. } 
207. var Ds = $tag("DoorP","div"); 
208. var Ts = $tag("DoorP","table"); 
209. if(Ds.length != Ts.length) 
210. { 
211. alert("标题和内容数目不相同!"); 
212. } 
213. for(var i = 0 ; i < Ds.length ; i++) 
214. { 
215. if(i==open) 
216. { 
217. Ds[i].style.height = dH+"px"; 
218. Ts[i].className="title01"; 
219. } 
220. else 
221. { 
222. Ds[i].style.height = "0px"; 
223. Ts[i].className="title02"; 
224. } 
225. Ts[i].value = i; 
226. Ts[i].onmouseover = function(){ 
227. if(open==this.value) 
228. { 
229. return false; 
230. } 
231. Ts[open].className="title02"; 
232. Ts[this.value].className="title01"; 
233. for(var i = 0 ; i < openState.length ; i++) 
234. { 
235. clearTimeout(openState[i]); 
236. clearTimeout(closeState[i]); 
237. } 
238. closeMe(open,this.value); 
239. //openMe(this.value); 
240. open = this.value; 
241. } 
242. } 
243. function showDiv(id){ 
244. Ds[id].style.height=dH+"px"; 
245. Ds[open].style.height="0px"; 
246. open = id; 
247. } 
248. </script> 
249. </body> 
250. </html> 

以上所述就是本文的全部内容了，希望大家能够喜欢。