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>