第一步，将下面的代码加
1<head>与</head>
之间
1<style>
2body{background-color:#FFFFFF}
3A{color:Navy; text-decoration:none}
4A:hover{color:red}
5A:visited:{color:#808080}
6TD{font-family:arial,helvetica; font-size:10pt}
7#divBg{position:absolute; z-index:10; width:200; left:0; height:100; clip:rect(0,10,10,0)}
8#divMenu{position:absolute; left:15; top:6; font-weight:bold}
9#divArrowLeft{position:absolute; width:20; height:20; left:0; top:9}
10#divArrowRight{position:absolute; width:20; height:20; top:9}
11</style>
1<script>
2
3//Simple browsercheck
4var n = (document.layers) ? 1:0;
5var ie = (document.all) ? 1:0;
6
7//The height of the menu
8menuHeight=22
9
10//Width of the arrows
11arrowWidth=16
12
13//Scroll speed: (in milliseconds, change this one and the next variable to change the speed)
14scrollSpeed=20
15
16//Pixels to scroll per timeout.
17scrollPx=10
18
19/**************************************************************************
20Scrolling functions
21***************************************************************************/
22var tim;
23var noScroll=true
24function mLeft(){
25if(!noScroll && oMenu.x<arrowWidth){
26oMenu.moveBy(scrollPx,0)
27tim=setTimeout("mLeft()",scrollSpeed)
28}
29}
30function mRight(){
31if(!noScroll && oMenu.x>-(oMenu.scrollWidth-(pageWidth))-arrowWidth){
32oMenu.moveBy(-scrollPx,0)
33tim=setTimeout("mRight()",scrollSpeed)
34}
35}
36function noMove(){clearTimeout(tim); noScroll=true}
37/**************************************************************************
38Object part
39***************************************************************************/
40function makeObj(obj,nest,num){
41nest=(!nest) ? '':'document.'+nest+'.'
42
43this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')
44this.evnt=(n)? eval(nest+'document.'+obj):eval(obj);
45this.scrollWidth=n?this.css.document.width:this.evnt.offsetWidth
46this.x=(n)? this.css.left:this.evnt.offsetLeft; this.y=(n)?
47this.css.top:this.evnt.offsetTop;
48this.moveBy=b_moveBy; this.moveIt=b_moveIt; this.showIt=b_showIt;this.clipTo=b_clipTo;
49return this
50}
51function b_moveBy(x,y){this.x=this.x+x; this.y=this.y+y; this.css.left=this.x; this.css.top=this.y}
52function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}
53function b_clipTo(t,r,b,l){
54if(n){this.css.clip.top=t; this.css.clip.right=r; this.css.clip.bottom=b; this.css.clip.left=l
55}else this.css.clip="rect("+t+","+r+","+b+","+l+")";
56}
57function b_showIt(){this.css.visibility="visible"}
58/**************************************************************************
59Object part end
60***************************************************************************/
61
62/**************************************************************************
63Init function. Set the placements of the objects here.
64***************************************************************************/
65function side_init(){
66//Width of the menu, Currently set to the width of the document.
67//If you want the menu to be 500px wide for instance, just
68//set the the pageWidth=500 in stead.
69pageWidth=(n)?innerWidth:document.body.offsetWidth-20;
70
71oBg=new makeObj('divBg')
72oMenu=new makeObj('divMenu','divBg')
73oArrowRight=new makeObj('divArrowRight','divBg')
74//Placement
75oBg.moveIt(0,0) //Main div, holds all the other divs.
76oMenu.moveIt(arrowWidth,6)
77oArrowRight.moveIt(pageWidth-arrowWidth,9)
78//setting the width and the visible area of the links.
79if(ie){ oBg.css.width=pageWidth; oBg.css.overflow="hidden"}
80oBg.clipTo(0,pageWidth,menuHeight,0)
81}
82
83//executing the init function on pageload.
84onload=side_init;
85</script>
第二步：将下面的原代码加入
1<body>与</body>
之间
1<div id="divBg">
2<div id="divMenu">
3<table><tr><td nowrap="">
4[<a href="#">link 1</a>] ? [<a href="#">link
52</a>] ? [<a href="#">link 3</a>] ? [<a href="#">link
64</a>] ? [<a href="#">link 5</a>] ?
7[<a href="#">link 6</a>] ?
8[<a href="#">link 7</a>] ?
9[<a href="#">link 8</a>] ?
10[<a href="#">link 9</a>] ?
11[<a href="#">link 10</a>] ?
12[<a href="#">link 11</a>] ?
13[<a href="#">link 12</a>] ?
14[<a href="#">link 13</a>] ?
15[<a href="#">link 14</a>] ?
16[<a href="#">link 15</a>] ?
17[<a href="#">link 16</a>] ?
18[<a href="#">link 17</a>] ?
19[<a href="#">link 18</a>] ?
20[<a href="#">link 19</a>] ?
21[<a href="#">link 20</a>] ?
22[<a href="#">link 21</a>] ?
23[<a href="#">link 22</a>] ?
24[<a href="#">link 23</a>] ?
25[<a href="#">link 24</a>] ?
26[<a href="#">link 25</a>] ?
27[<a href="#">link 26</a>] ?
28[<a href="#">link 27</a>] ?
29[<a href="#">link 28</a>] ?
30[<a href="#">link 29</a>] ?
31[<a href="#">link 30</a>]
32</td></tr></table>
33</div>
34<div id="divArrowLeft"><a href="javascript://" onmouseout="noMove
35()" onmouseover="noScroll=false; mLeft()"><img border="0" height="16" src="images/013-r.gif" width="16"/></a></div>
36<div id="divArrowRight"><a href="javascript://" onmouseout="noMove
37()" onmouseover="noScroll=false; mRight()"><img border="0" height="16" src="images/013-l.gif" width="16"/></a></div>
38</div>