參照網(wǎng)上的資源作了簡化修改,具體代碼不做詳細(xì)解釋,大家一看就明白:
<html> <head> <script language="JavaScript1.2"> <!-- //定義菜單內(nèi)容 var menucontents='<a >www.google.com</a> | <a >www.gsuo.com</a> | <a >www.baidu.com</a> | <a --> </script> </head> <body onload="initmenu(testmenu,menucontents);"> <table border="1" cellspacing="0" cellpadding="0"> <tr> <td width="200"> test1 </td> <td width="200"> test2 </td> </tr> <tr> <td id="testmenu" colspan="2" valign="middle"> </td> </tr> </table> </body> <script language="JavaScript1.2"> <!-- //配置菜單寬度 var menuwidth=300 //定義滾動速度(1-10),越大越快 var scrollspeed=6 //==========以下不需要修改============// var actualwidth=0 function initmenu(menuContainer,menuContent){ menuContainer.innerHTML='<table border="0" cellspacing="0" cellpadding="0"><tr><td valign="middle"><a href=# style="TEXT-DECORATION:none;" onMouseover="moveright()" onMouseout="clearTimeout(righttime)"><<<</a> </td><td valign="top">' +'<span style="position:relative;width:'+menuwidth+';">' +'<span style="position:absolute;width:'+menuwidth+';clip:rect(0 '+menuwidth+' auto 0)">' +'<span id="menu" style="position:absolute;left:0;top:0">' +'<nobr>'+menuContent+'</nobr>' +'</span></span></span>' +'</td><td valign="middle"> <a href="#" style="TEXT-DECORATION:none;" onMouseover="moveleft()" onMouseout="clearTimeout(lefttime)">>>></a></td></tr></table>'; actualwidth=menu.offsetWidth; } function moveleft(){ if (document.all&&menu.style.pixelLeft>(menuwidth-actualwidth)) menu.style.pixelLeft-=scrollspeed lefttime=setTimeout("moveleft()",50) } function moveright(){ if (document.all&&menu.style.pixelLeft<0) menu.style.pixelLeft+=scrollspeed righttime=setTimeout("moveright()",50) } --> </script> </html> |