ทำส่วนที่ไว้เลื่อนข้อความขึ้นลงและมีหลายหน้า

ทำส่วนที่ไว้เลื่อนข้อความขึ้นลงและมีหลายหน้า

ให้คุณ SAVE รูปประกอบไปด้วยครับ ด้านล่างนี้เลยครับ

นำ CODE ด้านล่างไปไว้ที่ <head> ครับ

<STYLE type=text/css> BODY { FONT-SIZE: 8px; COLOR: #999999; LINE-HEIGHT: 14px; FONT-FAMILY: Ms Sans Serif } #divScroller1 { BORDER-RIGHT: #666666 0px dashed; BORDER-TOP: #666666 0px dashed; Z-INDEX: 9; LEFT: 100px; OVERFLOW: hidden; BORDER-LEFT: #666666 1px dashed; WIDTH: 400px; CLIP: rect(0px 400px 300px 0px); BORDER-BOTTOM: #666666 0px dashed; POSITION: absolute; TOP: 90px; HEIGHT: 300px; visbility: visible } .dynPage { PADDING-LEFT: 15px; FONT-SIZE: 10px; Z-INDEX: 10; LEFT: 0px; VISIBILITY: hidden; WIDTH: 385px; COLOR: black; LINE-HEIGHT: 14px; FONT-FAMILY: Ms Sans serif; POSITION: absolute; TOP: 0px } #arrows { Z-INDEX: 11; LEFT: 74px; WIDTH: 20px; POSITION: absolute; TOP: 355px } #links { Z-INDEX: 11; LEFT: 77px; WIDTH: 20px; POSITION: absolute; TOP: 301px } </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() var numScrollPages = 3 // จำนวนหน้าที่มี var transitionOut = 1; // เวลาเปลี่ยนหน้าจะให้ค่อยๆหายไปหรือไม่ ใส่ 0 ถ้าไม่ต้องการ และ ใส่ 1 ถ้าต้องการ ให้หายไป var transitionIn = 2; // เวลาเปลี่ยนหน้าจะให้ตัวอักษรเป็นแบบใด ใส่ 0 ถ้าต้องการให้ขึ้นมาเลย ใส่ 1 ถ้าต้องการให้ค่อยๆขึ้นมา ใส่ 2 ถ้าต้องการให้เลื่อนมาจากด้านล่าง var slideAcceleration = 0.2; // ถ้าบรรทัดด้านบนคุณเลือก 2 ให้คุณใส่ความเร็วในการ SLIDE ครับ ตั้งแต่ 0-1 ครับ (เลขยิ่งมากยิ่งเร็ว) var transitionOnload = 1 // หน้มที่ขึ้นมาหน้าแรกต้องการจะให้มีลูกเล่นเลยหรือไม่ ใส่ 1 ถ้าต้องการ และ ใส่ 0 ถ้าไม่ต้องการ // A unit of measure that will be added when setting the position of a layer. var px = bw.ns4||window.opera?"":"px"; if(document.layers){ //NS4 resize fix... scrX= innerWidth; scrY= innerHeight; onresize= function(){if(scrX!= innerWidth || scrY!= innerHeight){history.go(0)} } } //object constructor... function scrollerobj(obj,nest){ nest = (!nest)?"":'document.'+nest+'.' this.elm = bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):document.getElementById(obj) this.css = bw.ns4?this.elm:this.elm.style this.doc = bw.ns4?this.elm.document:document this.obj = obj+'scrollerobj'; eval(this.obj+'=this') this.x = (bw.ns4||bw.opera5)?this.css.left:this.elm.offsetLeft this.y = (bw.ns4||bw.opera5)?this.css.top:this.elm.offsetTop this.w = (bw.ie4||bw.ie5||bw.ie6||bw.ns6)?this.elm.offsetWidth:bw.ns4?this.elm.clip.width:bw.opera5?this.css.pixelWidth:0 this.h = (bw.ie4||bw.ie5||bw.ie6||bw.ns6)?this.elm.offsetHeight:bw.ns4?this.elm.clip.height:bw.opera5?this.css.pixelHeight:0 } //object methods... scrollerobj.prototype.moveTo = function(x,y){ if(x!=null){this.x=x; this.css.left=x+px} if(y!=null){this.y=y; this.css.top=y+px} } scrollerobj.prototype.moveBy = function(x,y){this.moveTo(this.x+x,this.y+y)} scrollerobj.prototype.hideIt = function(){this.css.visibility='hidden'} scrollerobj.prototype.showIt = function(){this.css.visibility='visible'} /**************************************************************** scroll functions... ****************************************************************/ var scrollTimer = null; function scroll(step){ clearTimeout(scrollTimer); if ( !busy && (step<0&&activePage.y+activePage.h>scroller1.h || step>0&&activePage.y<0) ){ activePage.moveBy(0,step); scrollTimer = setTimeout('scroll('+step+')',40); } } function stopScroll(){ clearTimeout(scrollTimer); } /**************************************************************** activating the correct layers... ****************************************************************/ var activePage = null; var busy = 0; function activate(num){ if (activePage!=pages[num] && !busy){ busy = 1; if (transitionOut==0 || !bw.opacity){ activePage.hideIt(); activateContinue(num); } else if (transitionOut==1) activePage.blend('hidden', 'activateContinue('+num+')'); } } function activateContinue(num){ busy = 1; activePage = pages[num]; activePage.moveTo(0,0); if (transitionIn==0 || !bw.opacity){ activePage.showIt(); busy=0; } else if (transitionIn==1) activePage.blend('visible', 'busy=0'); else if (transitionIn==2) activePage.slide(0, slideAcceleration, 40, 'busy=0'); } /**************************************************************** Slide methods... ****************************************************************/ scrollerobj.prototype.slide = function(target, acceleration, time, fn){ this.slideFn= fn?fn:null; this.moveTo(0,scroller1.h); if (bw.ie4&&!bw.mac) this.css.filter = 'alpha(opacity=100)'; if (bw.ns6) this.css.MozOpacity = 1; this.showIt(); this.doSlide(target, acceleration, time); } scrollerobj.prototype.doSlide = function(target, acceleration, time){ this.step = Math.round(this.y*acceleration); if (this.step<1) this.step = 1; if (this.step>this.y) this.step = this.y; this.moveBy(0, -this.step); if (this.y>0) this.slideTim = setTimeout(this.obj+'.doSlide('+target+','+acceleration+','+time+')', time); else { eval(this.slideFn); this.slideFn = null; } } /**************************************************************** Opacity methods... ****************************************************************/ scrollerobj.prototype.blend= function(vis, fn){ if (bw.ie5||bw.ie6 && !bw.mac) { if (vis=='visible') this.css.filter= 'blendTrans(duration=0.9)'; else this.css.filter= 'blendTrans(duration=0.6)'; this.elm.onfilterchange = function(){ eval(fn); }; this.elm.filters.blendTrans.apply(); this.css.visibility= vis; this.elm.filters.blendTrans.play(); } else if (bw.ns6 || bw.ie&&!bw.mac){ this.css.visibility= 'visible'; vis=='visible' ? this.fadeTo(100, 7, 40, fn) : this.fadeTo(0, 9, 40, fn); } else { this.css.visibility= vis; eval(fn); } }; scrollerobj.prototype.op= 100; scrollerobj.prototype.opacityTim= null; scrollerobj.prototype.setOpacity= function(num){ this.css.filter= 'alpha(opacity='+num+')'; this.css.MozOpacity= num/100; this.op= num; } scrollerobj.prototype.fadeTo= function(target, step, time, fn){ clearTimeout(this.opacityTim); this.opacityFn= fn?fn:null; this.op = target==100 ? 0 : 100; this.fade(target, step, time); } scrollerobj.prototype.fade= function(target, step, time){ if (Math.abs(target-this.op)>step){ target>this.op? this.setOpacity(this.op+step):this.setOpacity(this.op-step); this.opacityTim= setTimeout(this.obj+'.fade('+target+','+step+','+time+')', time); } else { this.setOpacity(target); eval(this.opacityFn); this.opacityFn= null; } } /************************************************************** Init function... **************************************************************/ var pageslidefadeLoaded = 0; function initPageSlideFade(){ scroller1 = new scrollerobj('divScroller1'); pages = new Array(); for (var i=0; i<numScrollPages; i++){ pages[i] = new scrollerobj('dynPage'+i, 'divScroller1'); pages[i].moveTo(0,0); } bw.opacity = ( bw.ie && !bw.ie4 && navigator.userAgent.indexOf('Windows')>-1 ) || bw.ns6 if (bw.ie5||bw.ie6 && !bw.mac) pages[0].css.filter= 'blendTrans(duration=0.6)'; // Preloads the windows filters. if (transitionOnload) activateContinue(0); else{ activePage = pages[0]; activePage.showIt(); } if (bw.ie) for(var i=0;i<document.links.length;i++) document.links[i].onfocus=document.links[i].blur; pageslidefadeLoaded = 1; } //if the browser is ok, the script is started onload.. if(bw.bw && !pageslidefadeLoaded) onload = initPageSlideFade; </SCRIPT>

นำ CODE ด้านล่างไปไว้ที่ <body> ครับ

<DIV style="position:absolute;top:-60px;left:80px">  <DIV id=divScroller1>  <DIV class=dynPage id=dynPage0> <center>หน้าที่ 1 เนื้อหาของหน้าที่ 1 จบเนื้อหาหน้าที่ 1</center> </DIV>  <DIV class=dynPage id=dynPage1> <center>หน้าที่ 2 เนื้อหาของหน้าที่ 2 จบเนื้อหาหน้าที่ 2</center> </DIV>  <DIV class=dynPage id=dynPage2> <center>หน้าที่ 3 เนื้อหาของหน้าที่ 3 จบเนื้อหาหน้าที่ 3</center> </DIV> </DIV>  <DIV id=arrows><A onmousedown=scroll(25) onmouseover=scroll(6); onclick="scroll(6); return false;" onmouseout=stopScroll(); href="#"> <IMG height=17 alt="" src="../../../images10/arrows_rounded_up.gif" width=20 border=0></A> <A onmousedown=scroll(-25) onmouseover=scroll(-6); onclick="scroll(-6); return false;" onmouseout=stopScroll(); href="#"> <IMG height=17 alt="" src="../../../images10/arrows_rounded_down.gif" width=20 border=0></A> </DIV> <DIV id=links><A onfocus=if(this.blur)this.blur() onclick="activate(0); return false;" href="#">I</A> <A onfocus=if(this.blur)this.blur() onclick="activate(1); return false;" href="#">II</A> <A onfocus=if(this.blur)this.blur() onclick="activate(2); return false;" href="#">III</A> </DIV>