页面中的导航条

下面为效果显示

请选择下面的唐诗

葡萄美酒夜光杯,欲饮琵琶马上催,醉卧沙场君莫笑,古来征战几人回!



秦时明月汉时关,万里长征人未还,但使龙城飞将在,不教胡马渡阴山!



闺中少妇不知愁,春日凝妆上翠楼,忽见陌头杨柳色,悔教夫婿觅封侯!

脚本说明:
第一步：把如下代码加入<body>区域中
<STYLE type=text/css>#divUpControl {
	HEIGHT: 30px; LEFT: 150px; POSITION: absolute; TEXT-ALIGN: right; TOP: 188px; WIDTH: 320px; Z-INDEX: 1
}
#divDownControl {
	HEIGHT: 30px; LEFT: 150px; POSITION: absolute; TEXT-ALIGN: right; TOP: 365px; WIDTH: 320px; Z-INDEX: 1
}
#divContainer {
	CLIP: rect(0px 320px 150px 0px); HEIGHT: 150px; LEFT: 150px; OVERFLOW: hidden; POSITION: absolute; TOP: 210px; VISIBILITY: hidden; WIDTH: 320px
}
#divContent {
	LEFT: 0px; POSITION: absolute; TOP: 0px
}
H1 {
	FONT: bold 12px Arial, Helvetica, sans-serif
}
BODY {
	FONT: 12px Arial, Helvetica, sans-serif
}
P {
	FONT: 12px Arial, Helvetica, sans-serif
}
</STYLE>
<SCRIPT language=JavaScript>
<!--
function verifyCompatibleBrowser(){ 
    this.ver=navigator.appVersion 
    this.dom=document.getElementById?1:0 
    this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0; 
    this.ie4=(document.all && !this.dom)?1:0; 
    this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0; 
    this.ns4=(document.layers && !this.dom)?1:0; 
    this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5) 
    return this 
} 
bw=new verifyCompatibleBrowser() 
  
var speed=50 
var loop, timer 
 
function ConstructObject(obj,nest){ 
    nest=(!nest) ? '':'document.'+nest+'.' 
    this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0; 
    this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0; 
    this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight 
    this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight 
    this.up=MoveAreaUp;this.down=MoveAreaDown; 
    this.MoveArea=MoveArea; this.x; this.y; 
    this.obj = obj + "Object" 
    eval(this.obj + "=this") 
    return this 
} 
function MoveArea(x,y){ 
    this.x=x;this.y=y 
    this.css.left=this.x 
    this.css.top=this.y 
} 
function MoveAreaDown(move){ 
	if(this.y>-this.scrollHeight+objContainer.clipHeight){ 
    this.MoveArea(0,this.y-move) 
    if(loop) setTimeout(this.obj+".down("+move+")",speed) 
	} 
} 
function MoveAreaUp(move){ 
	if(this.y<0){ 
    this.MoveArea(0,this.y-move) 
    if(loop) setTimeout(this.obj+".up("+move+")",speed) 
	} 
} 
function PerformScroll(speed){ 
	if(initialised){ 
		loop=true; 
		if(speed>0) objScroller.down(speed) 
		else objScroller.up(speed) 
	} 
} 
function CeaseScroll(){ 
    loop=false 
    if(timer) clearTimeout(timer) 
} 
var initialised; 
function InitialiseScrollableArea(){ 
    objContainer=new ConstructObject('divContainer') 
    objScroller=new ConstructObject('divContent','divContainer') 
    objScroller.MoveArea(0,0) 
    objContainer.css.visibility='visible' 
    initialised=true; 
}

function displayStatusMsg(msgStr) { 
  status=msgStr;
  document.returnValue = true;
}

function swapImgRestore() { 
  var i,x,a=document.sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function findObj(n, d) { 
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=findObj(n,d.layers[i].document); return x;
}

function swapImage() { 
  var i,j=0,x,a=swapImage.arguments; document.sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=findObj(a[i]))!=null){document.sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->

</SCRIPT>

<SCRIPT language=JavaScript>

</SCRIPT>
<DIV id=divUpControl><A href="javascript:;" 
onmouseout=CeaseScroll();swapImgRestore() 
onmouseover="PerformScroll(-7);displayStatusMsg('Scroll Up');swapImage('scroller_up_button','','scroller_up_on.gif',1);return document.returnValue"><IMG 
alt= border=0 height=18 name=scroller_up_button 
src="scroller_up_on.gif" width=24></A> </DIV>
<DIV id=divDownControl><A href="javascript:;" 
onmouseout=CeaseScroll();swapImgRestore() 
onmouseover="PerformScroll(7);displayStatusMsg('Scroll Down');swapImage('scroller_down_button','','scroller_down_on.gif',1);return document.returnValue"><IMG 
alt= border=0 height=18 name=scroller_down_button 
src="scroller_down_on.gif" width=24></A> </DIV>
<DIV id=divContainer>
<DIV id=divContent><B>请选择下面的唐诗</B> 
<P><IMG border=0 height=32 src="boy5c.gif" 
width=32>葡萄美酒夜光杯,欲饮琵琶马上催,醉卧沙场君莫笑,古来征战几人回!</P>
<P></P>
<P><IMG border=0 height=32 src="qn.gif" 
width=32>秦时明月汉时关,万里长征人未还,但使龙城飞将在,不教胡马渡阴山!</P>
<P></P>
<P><IMG border=0 height=32 src="kinoko.gif" width=32>闺中少妇不知愁,春日凝妆上翠楼,忽见陌头杨柳色,悔教夫婿觅封侯!<BR></P></DIV></DIV>

第二步：把<body>中的内容改为：
<body onload="InitialiseScrollableArea();preloadImages('scroller_up_on.gif','scroller_down_on.gif')">