分页的文本显示

代码如下：
<SCRIPT language=JavaScript> function DynLayer(id,nestref,frame) { if (!is.ns5 && !DynLayer.set && !frame) DynLayerInit() this.frame = frame || self if (is.ns) { if (is.ns4) { if (!frame) { if (!nestref) var nestref = DynLayer.nestRefArray[id] if (!DynLayerTest(id,nestref)) return this.css = (nestref)? eval("document."+nestref+".document."+id) : document.layers[id] } else this.css = (nestref)? eval("frame.document."+nestref+".document."+id) : frame.document.layers[id] this.elm = this.event = this.css this.doc = this.css.document } else if (is.ns5) { this.elm = document.getElementById(id) this.css = this.elm.style this.doc = document } this.x = this.css.left this.y = this.css.top this.w = this.css.clip.width this.h = this.css.clip.height } else if (is.ie) { this.elm = this.event = this.frame.document.all[id] this.css = this.frame.document.all[id].style this.doc = document this.x = this.elm.offsetLeft this.y = this.elm.offsetTop this.w = (is.ie4)? this.css.pixelWidth : this.elm.offsetWidth this.h = (is.ie4)? this.css.pixelHeight : this.elm.offsetHeight } this.id = id this.nestref = nestref this.obj = id + "DynLayer" eval(this.obj + "=this") } function DynLayerMoveTo(x,y) { if (x!=null) { this.x = x if (is.ns) this.css.left = this.x else this.css.pixelLeft = this.x } if (y!=null) { this.y = y if (is.ns) this.css.top = this.y else this.css.pixelTop = this.y } } function DynLayerMoveBy(x,y) { this.moveTo(this.x+x,this.y+y) } function DynLayerShow() { this.css.visibility = (is.ns4)? "show" : "visible" } function DynLayerHide() { this.css.visibility = (is.ns4)? "hide" : "hidden" } DynLayer.prototype.moveTo = DynLayerMoveTo DynLayer.prototype.moveBy = DynLayerMoveBy DynLayer.prototype.show = DynLayerShow DynLayer.prototype.hide = DynLayerHide DynLayerTest = new Function('return true') // DynLayerInit Function function DynLayerInit(nestref) { if (!DynLayer.set) DynLayer.set = true if (is.ns) { if (nestref) ref = eval('document.'+nestref+'.document') else {nestref = ''; ref = document;} for (var i=0; i<ref.layers.length; i++) { var divname = ref.layers[i].name DynLayer.nestRefArray[divname] = nestref var index = divname.indexOf("Div") if (index > 0) { eval(divname.substr(0,index)+' = new DynLayer("'+divname+'","'+nestref+'")') } if (ref.layers[i].document.layers.length > 0) { DynLayer.refArray[DynLayer.refArray.length] = (nestref=='')? ref.layers[i].name : nestref+'.document.'+ref.layers[i].name } } if (DynLayer.refArray.i < DynLayer.refArray.length) { DynLayerInit(DynLayer.refArray[DynLayer.refArray.i++]) } } else if (is.ie) { for (var i=0; i<document.all.tags("DIV").length; i++) { var divname = document.all.tags("DIV")[i].id var index = divname.indexOf("Div") if (index > 0) { eval(divname.substr(0,index)+' = new DynLayer("'+divname+'")') } } } return true } DynLayer.nestRefArray = new Array() DynLayer.refArray = new Array() DynLayer.refArray.i = 0 DynLayer.set = false // Slide Methods function DynLayerSlideTo(endx,endy,inc,speed,fn) { if (endx==null) endx = this.x if (endy==null) endy = this.y var distx = endx-this.x var disty = endy-this.y this.slideStart(endx,endy,distx,disty,inc,speed,fn) } function DynLayerSlideBy(distx,disty,inc,speed,fn) { var endx = this.x + distx var endy = this.y + disty this.slideStart(endx,endy,distx,disty,inc,speed,fn) } function DynLayerSlideStart(endx,endy,distx,disty,inc,speed,fn) { if (this.slideActive) return if (!inc) inc = 10 if (!speed) speed = 20 var num = Math.sqrt(Math.pow(distx,2) + Math.pow(disty,2))/inc if (num==0) return var dx = distx/num var dy = disty/num if (!fn) fn = null this.slideActive = true this.slide(dx,dy,endx,endy,num,1,speed,fn) } function DynLayerSlide(dx,dy,endx,endy,num,i,speed,fn) { if (!this.slideActive) return if (i++ < num) { this.moveBy(dx,dy) this.onSlide() if (this.slideActive) setTimeout(this.obj+".slide("+dx+","+dy+","+endx+","+endy+","+num+","+i+","+speed+",\""+fn+"\")",speed) else this.onSlideEnd() } else { this.slideActive = false this.moveTo(endx,endy) this.onSlide() this.onSlideEnd() eval(fn) } } function DynLayerSlideInit() {} DynLayer.prototype.slideInit = DynLayerSlideInit DynLayer.prototype.slideTo = DynLayerSlideTo DynLayer.prototype.slideBy = DynLayerSlideBy DynLayer.prototype.slideStart = DynLayerSlideStart DynLayer.prototype.slide = DynLayerSlide DynLayer.prototype.onSlide = new Function() DynLayer.prototype.onSlideEnd = new Function() // Clip Methods function DynLayerClipInit(clipTop,clipRight,clipBottom,clipLeft) { if (is.ie) { if (arguments.length==4) this.clipTo(clipTop,clipRight,clipBottom,clipLeft) else if (is.ie4) this.clipTo(0,this.css.pixelWidth,this.css.pixelHeight,0) } } function DynLayerClipTo(t,r,b,l) { if (t==null) t = this.clipValues('t') if (r==null) r = this.clipValues('r') if (b==null) b = this.clipValues('b') if (l==null) l = this.clipValues('l') if (is.ns) { this.css.clip.top = t this.css.clip.right = r this.css.clip.bottom = b this.css.clip.left = l } else if (is.ie) this.css.clip = "rect("+t+"px "+r+"px "+b+"px "+l+"px)" } function DynLayerClipBy(t,r,b,l) { this.clipTo(this.clipValues('t')+t,this.clipValues('r')+r,this.clipValues('b')+b,this.clipValues('l')+l) } function DynLayerClipValues(which) { if (is.ie) var clipv = this.css.clip.split("rect(")[1].split(")")[0].split("px") if (which=="t") return (is.ns)? this.css.clip.top : Number(clipv[0]) if (which=="r") return (is.ns)? this.css.clip.right : Number(clipv[1]) if (which=="b") return (is.ns)? this.css.clip.bottom : Number(clipv[2]) if (which=="l") return (is.ns)? this.css.clip.left : Number(clipv[3]) } DynLayer.prototype.clipInit = DynLayerClipInit DynLayer.prototype.clipTo = DynLayerClipTo DynLayer.prototype.clipBy = DynLayerClipBy DynLayer.prototype.clipValues = DynLayerClipValues // Write Method function DynLayerWrite(html) { if (is.ns) { this.doc.open() this.doc.write(html) this.doc.close() } else if (is.ie) { this.event.innerHTML = html } } DynLayer.prototype.write = DynLayerWrite // BrowserCheck Object function BrowserCheck() { var b = navigator.appName if (b=="Netscape") this.b = "ns" else if (b=="Microsoft Internet Explorer") this.b = "ie" else this.b = b this.version = navigator.appVersion this.v = parseInt(this.version) this.ns = (this.b=="ns" && this.v>=4) this.ns4 = (this.b=="ns" && this.v==4) this.ns5 = (this.b=="ns" && this.v==5) this.ie = (this.b=="ie" && this.v>=4) this.ie4 = (this.version.indexOf('MSIE 4')>0) this.ie5 = (this.version.indexOf('MSIE 5')>0) this.min = (this.ns||this.ie) } is = new BrowserCheck() // CSS Function function css(id,left,top,width,height,color,vis,z,other) { if (id=="START") return '<STYLE TYPE="text/css">\n' else if (id=="END") return '</STYLE>' var str = (left!=null && top!=null)? '#'+id+' {position:absolute; left:'+left+'px; top:'+top+'px;' : '#'+id+' {position:relative;' if (arguments.length>=4 && width!=null) str += ' '+width+'px;' if (arguments.length>=5 && height!=null) { str += ' height:'+height+'px;' if (arguments.length<9 || other.indexOf('clip')==-1) str += ' clip:rect(0px '+width+'px '+height+'px 0px);' } if (arguments.length>=6 && color!=null) str += (is.ns)? ' layer-background-color:'+color+';' : ' background-color:'+color+';' if (arguments.length>=7 && vis!=null) str += ' visibility:'+vis+';' if (arguments.length>=8 && z!=null) str += ' z-index:'+z+';' if (arguments.length==9 && other!=null) str += ' '+other str += '}\n' return str } function writeCSS(str,showAlert) { str = css('START')+str+css('END') document.write(str) if (showAlert) alert(str) } </SCRIPT> <SCRIPT language=JavaScript> function MiniScroll(window,content) { this.window = window this.content = content this.inc = 8 this.speed = 20 this.contentHeight = (is.ns)? this.content.doc.height : this.content.elm.scrollHeight this.contentWidth = (is.ns)? this.content.doc.width : this.content.elm.scrollWidth this.up = MiniScrollUp this.down = MiniScrollDown this.left = MiniScrollLeft this.right = MiniScrollRight this.stop = MiniScrollStop this.activate = MiniScrollActivate this.activate(this.contentWidth,this.contentHeight) } function MiniScrollActivate() { this.offsetHeight = this.contentHeight-this.window.h this.offsetWidth = this.contentWidth-this.window.w this.enableVScroll = (this.offsetHeight>0) this.enableHScroll = (this.offsetWidth>0) } function MiniScrollUp() { if (this.enableVScroll) this.content.slideTo(null,0,this.inc,this.speed) } function MiniScrollDown() { if (this.enableVScroll) this.content.slideTo(null,-this.offsetHeight,this.inc,this.speed) } function MiniScrollLeft() { if (this.enableHScroll) this.content.slideTo(0,null,this.inc,this.speed) } function MiniScrollRight() { if (this.enableHScroll) this.content.slideTo(-this.offsetWidth,null,this.inc,this.speed) } function MiniScrollStop() { this.content.slideActive = false } </SCRIPT> <SCRIPT language=JavaScript> <!-- function init() { pulloutContent = new Array() pulloutWindow = new Array() pulloutScroll = new Array() for (var i=0;i<=4;i++) { pulloutContent[i] = new DynLayer('pullout'+i+'Content') pulloutWindow[i] = new DynLayer('pullout'+i+'Window') pulloutWindow[i].slideInit() pulloutScroll[i] = new MiniScroll(pulloutWindow[i],pulloutContent[i]) } pulloutShown = 0 } function pulloutStart(i) { if (i!=pulloutShown) { pulloutActive = true pulloutWindow[pulloutShown].slideTo(-285,null,15,15,'pulloutEnd('+i+')') } } function pulloutEnd(i) { pulloutShown = i pulloutWindow[i].slideTo(0,null,15,15,'pulloutActive==false') } //--> </SCRIPT> <STYLE type=text/css>A { FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: 'Arial' } A.scroll { COLOR: #ffffff } STRONG { FONT-WEIGHT: bold; FONT-SIZE: 15pt; LINE-HEIGHT: 25pt; FONT-FAMILY: 'Arial' } P { FONT-SIZE: 10pt; LINE-HEIGHT: 13pt; FONT-FAMILY: 'Arial' } #pulloutInterface { LEFT: 200px; WIDTH: 400px; CLIP: rect(0px 400px 250px 0px); POSITION: absolute; TOP: 150px; HEIGHT: 250px; BACKGROUND-COLOR: #000000; layer-background-color: #000000 } #pullout0Sidebar { LEFT: 5px; WIDTH: 100px; CLIP: rect(0px 100px 30px 0px); POSITION: absolute; TOP: 5px; HEIGHT: 30px; BACKGROUND-COLOR: #dedede; layer-background-color: #DEDEDE } #pullout1Sidebar { LEFT: 5px; WIDTH: 100px; CLIP: rect(0px 100px 30px 0px); POSITION: absolute; TOP: 40px; HEIGHT: 30px; BACKGROUND-COLOR: #c5c5c5; layer-background-color: #C5C5C5 } #pullout2Sidebar { LEFT: 5px; WIDTH: 100px; CLIP: rect(0px 100px 30px 0px); POSITION: absolute; TOP: 75px; HEIGHT: 30px; BACKGROUND-COLOR: #a2a2a2; layer-background-color: #A2A2A2 } #pullout3Sidebar { LEFT: 5px; WIDTH: 100px; CLIP: rect(0px 100px 30px 0px); POSITION: absolute; TOP: 110px; HEIGHT: 30px; BACKGROUND-COLOR: #7e7e7e; layer-background-color: #7E7E7E } #pullout4Sidebar { LEFT: 5px; WIDTH: 100px; CLIP: rect(0px 100px 30px 0px); POSITION: absolute; TOP: 145px; HEIGHT: 30px; BACKGROUND-COLOR: #7e7e7e; layer-background-color: #7E7E7E } #pulloutUpDown { LEFT: 5px; POSITION: absolute; TOP: 200px } #pulloutViewArea { LEFT: 110px; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px); POSITION: absolute; TOP: 5px; HEIGHT: 240px; BACKGROUND-COLOR: #000000; layer-background-color: #000000 } #pullout0Window { LEFT: 0px; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px); POSITION: absolute; TOP: 0px; HEIGHT: 240px; BACKGROUND-COLOR: #dedede; layer-background-color: #DEDEDE } #pullout0Content { LEFT: 5px; WIDTH: 275px; POSITION: absolute; TOP: 0px } #pullout1Window { LEFT: -285px; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px); POSITION: absolute; TOP: 0px; HEIGHT: 240px; BACKGROUND-COLOR: #c5c5c5; layer-background-color: #C5C5C5 } #pullout1Content { LEFT: 5px; WIDTH: 275px; POSITION: absolute; TOP: 0px } #pullout2Window { LEFT: -285px; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px); POSITION: absolute; TOP: 0px; HEIGHT: 240px; BACKGROUND-COLOR: #a2a2a2; layer-background-color: #A2A2A2 } #pullout2Content { LEFT: 5px; WIDTH: 275px; POSITION: absolute; TOP: 0px } #pullout3Window { LEFT: -285px; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px); POSITION: absolute; TOP: 0px; HEIGHT: 240px; BACKGROUND-COLOR: #7e7e7e; layer-background-color: #7E7E7E } #pullout3Content { LEFT: 5px; WIDTH: 275px; POSITION: absolute; TOP: 0px } #pullout4Window { LEFT: -285px; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px); POSITION: absolute; TOP: 0px; HEIGHT: 240px; BACKGROUND-COLOR: #7e7e7e; layer-background-color: #7E7E7E } #pullout4Content { LEFT: 5px; WIDTH: 275px; POSITION: absolute; TOP: 0px } </STYLE> <DIV id=pulloutInterface> <DIV id=pullout0Sidebar> <P align=center><A href="javascript:pulloutStart(0)">第一页</A></P></DIV> <DIV id=pullout1Sidebar> <P align=center><A href="javascript:pulloutStart(1)">第二页</A></P></DIV> <DIV id=pullout2Sidebar> <P align=center><A href="javascript:pulloutStart(2)">第三页</A></P></DIV> <DIV id=pullout3Sidebar> <P align=center><A href="javascript:pulloutStart(3)">第四页</A></P></DIV> <DIV id=pullout4Sidebar> <P align=center><A href="javascript:pulloutStart(4)">第五页</A></P></DIV> <DIV id=pulloutUpDown><A onmouseup=pulloutScroll[pulloutShown].stop() class=scroll onmousedown=pulloutScroll[pulloutShown].up() onmouseout=pulloutScroll[pulloutShown].stop() href="javascript://%20Scroll%20Up">向上</A> <BR><A onmouseup=pulloutScroll[pulloutShown].stop() class=scroll onmousedown=pulloutScroll[pulloutShown].down() onmouseout=pulloutScroll[pulloutShown].stop() href="javascript://%20Scroll%20Down">向下</A> </DIV> <DIV id=pulloutViewArea> <DIV id=pullout0Window> <DIV id=pullout0Content> <DIV align=center><STRONG>第一页</STRONG></DIV> <TABLE width=275 border=0> <TBODY> <TR> <TD> <P>This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space.</P> <P>This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space.</P></TD></TR></TBODY></TABLE></DIV></DIV> <DIV id=pullout1Window> <DIV id=pullout1Content> <DIV align=center><STRONG>第二页</STRONG></DIV> <TABLE width=275 border=0> <TBODY> <TR> <TD> <P>This is item number 1. This text is here to fill up space. This is item number 1. This text is here to fill up space. This is item number 1. This text is here to fill up space. This is item number 1. This text is here to fill up space.</P> <P>This is item number 1. This text is here to fill up space. This is item number 1. This text is here to fill up space. This is item number 1. This text is here to fill up space. This is item number 1. This text is here to fill up space.</P> <P>This is item number 1. This text is here to fill up space. This is item number 1. This text is here to fill up space. This is item number 1. This text is here to fill up space. This is item number 1. This text is here to fill up space.</P> <P>This is item number 1. This text is here to fill up space. This is item number 1. This text is here to fill up space. This is item number 1. This text is here to fill up space. This is item number 1. This text is here to fill up space.</P> <P>This is item number 1. This text is here to fill up space. This is item number 1. This text is here to fill up space. This is item number 1. This text is here to fill up space. This is item number 1. This text is here to fill up space.</P> <P>This is item number 1. This text is here to fill up space. This is item number 1. This text is here to fill up space. This is item number 1. This text is here to fill up space. This is item number 1. This text is here to fill up space.</P></TD></TR></TBODY></TABLE></DIV></DIV> <DIV id=pullout2Window> <DIV id=pullout2Content> <DIV align=center><STRONG>第三页</STRONG></DIV> <TABLE width=275 border=0> <TBODY> <TR> <TD> <P>This is item number 2. This text is here to fill up space. This is item number 2. This text is here to fill up space. This is item number 2. This text is here to fill up space. This is item number 2. This text is here to fill up space.</P> <P>This is item number 2. This text is here to fill up space. This is item number 2. This text is here to fill up space. This is item number 2. This text is here to fill up space. This is item number 2. This text is here to fill up space.</P> <P>This is item number 2. This text is here to fill up space. This is item number 2. This text is here to fill up space. This is item number 2. This text is here to fill up space. This is item number 2. This text is here to fill up space.</P> <P>This is item number 2. This text is here to fill up space. This is item number 2. This text is here to fill up space. This is item number 2. This text is here to fill up space. This is item number 2. This text is here to fill up space.</P> <P>This is item number 2. This text is here to fill up space. This is item number 2. This text is here to fill up space. This is item number 2. This text is here to fill up space. This is item number 2. This text is here to fill up space.</P> <P>This is item number 2. This text is here to fill up space. This is item number 2. This text is here to fill up space. This is item number 2. This text is here to fill up space. This is item number 2. This text is here to fill up space.</P></TD></TR></TBODY></TABLE></DIV></DIV> <DIV id=pullout3Window> <DIV id=pullout3Content> <DIV align=center><STRONG>第四页</STRONG></DIV> <TABLE width=275 border=0> <TBODY> <TR> <TD> <P>This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space.</P> <P>This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space.</P> <P>This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space.</P> <P>This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space.</P> <P>This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space.</P></TD></TR></TBODY></TABLE></DIV></DIV> <DIV id=pullout4Window> <DIV id=pullout4Content> <DIV align=center><STRONG>第五页</STRONG></DIV> <TABLE width=275 border=0> <TBODY> <TR> <TD> <P>This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space.</P> <P>This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space.</P> <P>This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space.</P> <P>This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space.</P> <P>This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space. This is item number 0. This text is here to fill up space.</P></TD></TR></TBODY></TABLE></DIV></DIV></DIV></DIV> <body bgcolor="#ffffff" onload=init()>
[Ctrl+A 全选 提示:你可先修改部分代码,再点运行代码]
转自: http://goaler.xicp.net/Article/ShowArticle.asp?ID=474