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=utf-8" />
5 <title>仿FLASH的竖排导航 —— 妙味课堂 www.miaov.com</title>
6 <style>
7 li { margin-bottom: 2px; list-style: none; background: url(bg.gif) repeat-x 0 1px; float: left; clear: left; cursor: pointer-; }
8 a { display: block; width: 120px; height: 25px; line-height: 25px; position: relative; padding: 0 6px; border: 1px solid #d6d6d6; text-decoration: none; font-size: 12px; color: #555; }
9 a:hover { font-weight: bold; border: 1px solid #b5b5b5; }
10 span { display: block; width: 9px; height: 8px; overflow: hidden; background: url(ico.gif) no-repeat; position: absolute; top: 8px; right: 10px; }
11 </style>
12 <script type="text/javascript">
13 window.onload=function ()
14 {
15 var aA=document.getElementById('menu').getElementsByTagName('a');
16 var i=0;
17
18 for(i=0;i<aA.length;i++)
19 {
20 aA[i].iTime=null;
21 aA[i].iSpeed=6;
22 aA[i].onmouseover=function ()
23 {
24 goTime(this,30,1);
25 }
26 aA[i].onmouseout=function ()
27 {
28 goTime(this,6,-1);
29 }
30 }
31 }
32 function goTime(obj,iTarget,toggle)
33 {
34 if(obj.iTime)
35 {
36 clearInterval(obj.iTime);
37 }
38 obj.iTime=setInterval(function()
39 {
40 if(obj.iSpeed===iTarget)
41 {
42 clearInterval(obj.iTime);
43 obj.iTime=null;
44 }
45 else
46 {
47 obj.iSpeed+=2*toggle;
48 obj.style.paddingLeft=obj.iSpeed+'px';
49 obj.style.paddingRight=obj.iSpeed+'px';
50 }
51
52 },30);
53 }
54 </script>
55 </head>
56
57 <body>
58
59 <ul id="menu">
60 <li><a href="http://www.miaov.com" target="_blank">首页<span></span></a></li>
61 <li><a href="http://www.miaov.com" target="_blank">妙味精品课程<span></span></a></li>
62 <li><a href="http://www.miaov.com" target="_blank">CSS相关知识<span></span></a></li>
63 <li><a href="http://www.miaov.com" target="_blank">关于我们<span></span></a></li>
64 <li><a href="http://www.miaov.com" target="_blank">联系我们<span></span></a></li>
65 </ul>
66
67 </body>
68 </html>
