การแสดงข้อความแบบเลื่อนขึ้น

2006/Mar/23

entry นี้พิเศษหน่อยครับเพราะจัดให้แก่คุณชายมากรัก ที่อยากได้ script ตัวนี้ การที่จะให้ข้อความเลื่อนในแนวตั้งได้แบบ scroll นั้นเราสามารถใช้ div ในการแสดงข้อความแล้วใช้ Objecttimerใน javascript เป็นตัวควบคุมการ scroll
นำส่วนนี้ไปไว้ส่วน<head></head>ของ Html
<SCRIPT type=text/javascript>
function scrollernews(name,initH,initW,heightB,widthB,content,initBg,Bg,speed,initFl){
this.name=name;
this.initH=initH;
this.initW=initW;
this.heightB=heightB;
this.widthB=widthB;
this.content=content;
this.initBg=initBg;
this.Bg=Bg;
this.iniFl=initFl;
this.speed=parseInt(speed);
this.timer=name + "Timer";
//**methods**//
this.getElement=getElement; this.createLayer=createLayer;
this.scrollLayer=scrollLayer; this.scrollLoop=scrollLoop;
//**initiate methods**//
this.createLayer(); this.getElement(); this.scrollLayer();
}
//**call this method to stop scrolling**//
function scrollLoop(s){this.speed=s;}
function scrollLayer(){
if(parseInt(this.elem.style.top)>(this.elem.offsetHeight*(-1))){
this.elem.style.top=parseInt(this.elem.style.top)-this.speed+'px';
}else{
this.elem.style.top=this.initH+'px';
}
}
function getElement(){
this.elem=document.getElementById(this.name);
}
function createLayer(){
document.write('<div id="layer'+this.name+'" style="position:relative;overflow:hidden;float:');
document.write(this.initFl+';background-color:#'+this.initBg+';border:1px solid black;width:');
document.write(this.initW+'px;height:'+this.initH+'px;" onmouseover="');
document.write(this.name+'.scrollLoop(0)" onmouseout="'+this.name+'.scrollLoop(');
document.write(this.speed+')">');
document.write('<div id="'+this.name+'" style="position:absolute;top:');
document.write(this.initH+'px;left:0px;border:0px solid black;width:');
document.write(this.widthB+'px;height:'+this.heightB+'px;background-color:#');
document.write(this.Bg+'">');
document.write(this.content);
document.write('<\/div><\/div>');
if(this.scrollLayer){this.timer=setInterval(this.name+'.scrollLayer()','30');}
}//]]>
</SCRIPT>
เรียกใช้
<div id="newsbox">
<script type="text/javascript">
//Param:boxName, boxHeight, boxWidth, contentHeight, contentWidth, content, boxColor, textColor, speed and initial FloatPosition
c=new scrollernews('c','135','100','200','100','Sample of news scroller news','ffffff','ffffff','1','center')
</script>
</div>
ผลการรัน

posted by codesnippet, at 2006-Mar-23 11:03:0210

อืมม เปนประโยชน์มากเยย
ขอบคุนด้วยคนค่า ^^

#1 by ★yAmMiEzz★ At 2006-03-23 11:14,

สุดยอดเลยครับ ขอบคุณมากเลย เออ มีคำถามอีกแย้วว อิอิ คือเวลาผมจะเปลี่ยนบรรทัดใหม่นะครับ ตั้งแทรกโค้ดอะไรครับ เมื่อกี้ไปลองดูแล้ว กว่าจะปรับขนาดกล่องได้ อิอิ แบบว่า เรื่องนี้ผมไม่ถนัดอย่างแรงเลย รบกวนอีกครั้ง แล้วคงต้องรบกวนบ่อยๆ

อิอิ

#2 by คุณชายมากรักแห่งกระท่อมสายลม At 2006-03-23 13:16,

อะ เมื่อกี้อธิบายไม่ละเอียด แบบอย่างตัวอย่างนะครับ บรรทัดแรก ลองดู อีกบรรทัดก็ นะจ้า ประมาณนี้อะครับ คือที่ลองทำดู มันจะตัดบรรทัดให้เองถ้าตัวอักษรมันเกิดcontent ที่ตั้งไว้100 อะครับ โดยที่ผมไม่รู้ต้องไปกำหนดตรงไหนให้มันตัดขี้นบรรทัดใหม่ โดยผมกำหนดเองอะ อืมๆ อธิบายไม่ค่อยถูกแหะ

#3 by คุณชายมากรักแห่งกระท่อมสายลม At 2006-03-23 13:19,

ออ ขอบคุณครับ เรื่องเปลี่ยนบรรทัดเมื่อกี้ผมมั่วได้แล้วครับ อิอิ เดียวอีกหน่อยผมคงมีคำถามมาถามอีก คงไม่ว่ากันนะครับ

#4 by คุณชายมากรักแห่งกระท่อมสายลม At 2006-03-23 13:42,

อะ พี่ครับ คือตอนที่ผมลองโค้ดใน dream แล้ว พรีวิว ดูมันก็ไม่มีปัญหานะครับ แต่พอไปอัพโหลดดูแล้ว มัน error page อะครับ พี่ลองเข้าไปดูนะครับhttp://geocities.com/berserk_rabbit

#5 by คุณชายมากรักแห่งกระท่อมสายลม At 2006-03-23 14:49,

ยินดีครับ ตอบได้เท่าที่รู้นะครับถ้าไม่รู้ก็จะขอเวลาไปค้นคว้ามาให้อีกที เพราะอาจจะเป็นประโยชน์ต่อคนอีกหลายๆคน ยินดี แบ่งปันประสบการณ์กันครับ

#6 by Code SNippet At 2006-03-23 16:12,

ผมลองเข้าไปดูมาแล้ว ลอง view code ดูก็เจอ บรรทัดนี้ครับ

</object></layer></div></span></style></noscript></table></script></applet>
<script language="JavaScript" src="http://us.i1.yimg.com/us.yimg.com/i/mc/mc.js"></script>
<script language="JavaScript" src="http://geocities.com/js_source/geov2.js"></script>
<script language="javascript">geovisit();
</script><noscript><img src="http://visit.webhosting.yahoo.com/visit.gif?us1143103475" alt="setstats" border="0" width="1" height="1"></noscript>
<IMG SRC="http://geo.yahoo.com/serv?s=76001548&t=1143103475&f=us-w66" ALT=1 WIDTH=1 HEIGHT=1>
อันนี้ผมไม่รู้ที่มานะครับ แต่มันทำให้เกิด error ทดลองได้โดยการเอามันออกไป ก็สามารถแก้ไขได้ครับ แต่ก็ไม่รู้ว่าจะสงผลต่อส่วนอื่นหรือเปล่า ลองดูครับ
ฝากอีกนิดการที่เรานำ script มาใช้ เยอะๆ เราควรจัดการเก็บไว้เป็นหมวดหมู่ ตัวไหนสามารถ @import หรือ link มาได้ก็ควรทำ เพราะจะทำให้ หาข้อผิดพลาดได้ง่าย

#7 by Code SNippet At 2006-03-23 16:17,

ขอบคุณมากครับ แต่ในโค้ดผมมันไม่มีตัวนี้อะครับ ผมลองเช็คดูแล้ว มันจะเกี่ยวกับ hostของgeocities หรือเป่าครับ

#8 by คุณชายมากรักแห่งกระท่อมสายลม At 2006-03-23 16:54,

แล้ว ถ้าจะเอามาใส่ในทีมเรา แก้ให้เปนภาษาcss ได้งัยคะ มานไม่ยอมรับจาวาอ่ะ

#9 by *^_^* The moon without the shadow *^_^* At 2006-03-23 18:29,

มีการประกาศ Instance ซ้ำกันครับให้
c=new scrollernews('c','135','100'..
เป็น
testbox=new scrollernews('testbox','135','100'..

#10 by Code SNippet At 2006-03-24 21:49,

<< Home

DAEMON
View full profile