多页面文字显示

多页面文字显示

下面为效果显示

Page 1 Page 2 Page 3 Page 4

up down

This is "page" 1, here you place some content. You should place more content then this or it won't scroll..blablablabl

text text dummy texttext text dummy texttext text dummy text

text text dummy text text text dummy text text text dummy text

This is "page" 2...........
text textdummy texttext text dummy texttext text dummy text

text text dummy text text text dummy text text text dummy text
text text dummy texttext text dummy texttext text dummy text

text text dummy text text text dummy text text text dummy text

text textdummy texttext text dummy texttext text dummy text

text text dummy text text text dummy text text text dummy text
text text dummy texttext text dummy texttext text dummy text

text text dummy text text text dummy text text text dummy text

This is "page" 3...........(can't scroll this one, to little content)

Page 4 text text dummy texttext text dummy texttext text dummy text

ext text dummy texttext text dummy texttext text dummy text

text text dummy texttext text dummy texttext text dummy text

text text dummy texttext text dummy texttext text dummy text

text text dummy texttext text dummy texttext text dummy text

脚本说明:
把如下代码加入<body>区域中
<style type="text/css">
#divControl{position:absolute; width:250; font-family:arial; left:120; top:190; font-size:10pt; visibility:hidden}
#divCont{position:absolute; top:250; left:120; clip:rect(0,250,150,0); height:150; width:250}
.clScroll{position:absolute; top:0; font-size:10pt; left:0; font-family:arial; visibility:hidden} 
</style>
<script language="JavaScript" type="text/javascript">
function lib_bwcheck(){ //Browsercheck (needed)
	this.ver=navigator.appVersion
	this.agent=navigator.userAgent
	this.dom=document.getElementById?1:0
	this.opera5=this.agent.indexOf("Opera 5")>-1
	this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; 
	this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
	this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
	this.ie=this.ie4||this.ie5||this.ie6
	this.mac=this.agent.indexOf("Mac")>-1
	this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; 
	this.ns4=(document.layers && !this.dom)?1:0;
	this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
	return this
}
var bw=new lib_bwcheck()

/*********************************************************************************
These are the variables you have to set:
*********************************************************************************/

//The speed of the timeout between each scroll.
timSpeed=50

//The height of the container (change this when it scrolls to much or to little)
contHeight=100

/*********************************************************************************
This is the object constructor function, which applies 
methods and properties to the Cross-browser layer object
*********************************************************************************/
function makeScrollObj(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.height=bw.ns4?this.css.document.height:this.el.offsetHeight
	this.top=b_gettop										
	return this
}
//Getting the top for the top method
function b_gettop(){
	var gleft=(bw.ns4 || bw.ns6)?parseInt(this.css.top):eval(this.css.pixelTop);
	return gleft;
}
//Variables
var scrollTim=1;
var active=0;
/*********************************************************************************
The scroll function. Checks what way to scroll and checks if the
layer is not already on top or bottom.
*********************************************************************************/
function scroll(speed){
	clearTimeout(scrollTim)
	way=speed>0?1:0
	if((!way && oScroll[active].top()>-oScroll[active].height+contHeight) || (oScroll[active].top()<0 && way)){
		oScroll[active].css.top=oScroll[active].top()+speed
		scrollTim=setTimeout("scroll("+speed+")",timSpeed)
	}
}
//Clears the timeout so the scroll stops, this is called onmouseout.
function noScroll(){
	clearTimeout(scrollTim)
}
/*********************************************************************************
Changes the active layer. Hides the one that's visible and
shows the "new" one. Also set's the new layers top to
0 so it starts at top.
*********************************************************************************/
function changeActive(num){
	oScroll[active].css.visibility='hidden'
	active=num
	oScroll[active].css.top=0
	oScroll[active].css.visibility='visible'
}
/*********************************************************************************
Initilizes the page, makes a oScroll Array and calls the object constructor.
Here you can add as many scrollObjects as you want
*********************************************************************************/
function scrollInit(){
	oScroll=new Array()
	oScroll[0]=new	makeScrollObj('divScroll1','divCont')
	oScroll[1]=new	makeScrollObj('divScroll2','divCont')
	oScroll[2]=new	makeScrollObj('divScroll3','divCont')
	oScroll[3]=new	makeScrollObj('divScroll4','divCont')
	oScroll[0].css.visibility='visible'
	oControl=new makeScrollObj('divControl')
	oControl.css.visibility='visible'
}
/*********************************************************************************
Executes the scrollInit function on pageload.
*********************************************************************************/
onload=scrollInit;
</script>
<div id="divControl">
	<a href="#" onclick="changeActive(0)">Page 1</a>
	<a href="#" onclick="changeActive(1)">Page 2</a>
	<a href="#" onclick="changeActive(2)">Page 3</a>
	<a href="#" onclick="changeActive(3)">Page 4</a>
	<br><br>
	<a href="#" onmouseover="scroll(5)" onmouseout="noScroll()">up</a>
	<a href="#" onmouseover="scroll(-5)" onmouseout="noScroll()">down</a>
</div>
<div id="divCont">
	<div id="divScroll1" class="clScroll">
		This is "page" 1, here you place some content.
		You should place more content then this
		or it won't scroll..blablablabl<br>
		<br>text text dummy texttext text dummy texttext text dummy text<br>
		<br>text text dummy text text text dummy text text text dummy text <br>
	</div>
	
	<div id="divScroll2" class="clScroll">
		This is "page" 2...........
		<br>text textdummy texttext text dummy texttext text dummy text<br>
		<br>text text dummy text text text dummy text text text dummy text <br>
		text text dummy texttext text dummy texttext text dummy text<br>
		<br>text text dummy text text text dummy text text text dummy text <br>
		<br>text textdummy texttext text dummy texttext text dummy text<br>
		<br>text text dummy text text text dummy text text text dummy text <br>
		text text dummy texttext text dummy texttext text dummy text<br>
		<br>text text dummy text text text dummy text text text dummy text <br>
	</div>

<div id="divScroll3" class="clScroll">
		This is "page" 3...........(can't scroll this one, to little content)
		<br>
	</div>

<div id="divScroll4" class="clScroll">
		Page 4 
		text text dummy texttext text dummy texttext text dummy text<br>
		<br>ext text dummy texttext text dummy texttext text dummy text<br>
		<br>text text dummy texttext text dummy texttext text dummy text<br>
		<br>text text dummy texttext text dummy texttext text dummy text<br>
		<br>text text dummy texttext text dummy texttext text dummy text<br>
	</div>
</div>