โมดูล Marquee

marquee เป็นอีก tag หนึ่งที่ไม่มีใน XHTML หากจำเป็นต้องใช้ ให้ใช้ module นี้ครับ

<div id="marqueecontainer" onmouseover="counter_copyspeed=counter_pausespeed" onmouseout="counter_copyspeed=counter_marqueespeed">

<div id="marquee">

ข้อความภายใน marquee

</div>

</div>

โค้ดในพื้นที่ส่วนแสดงผลครับ ส่วนสีแดง เป็น id ที่ต้องกำหนดให้ตรงกันกับใน Javascript ครับ

#marqueecontainer {

  background-color:pink;

  width:100%;

  position:relative;

  overflow:hidden;

}

#marqueecontainer #marquee {

  color:navy;

  display:table;

  position:relative;

}

อันนี้เป็นส่วนกำหนดรูปแบบของพื้นที่แสดงผล ส่วนสีแดงเป็นส่วนที่ต้องกำหนดครับ

var delayb4scroll=1000 /* หน่วงเวลาตอนเิริ่มต้น */

var counter_marqueespeed=5 /* ความเร็ว (1-10) */

var pauseit=1 /* หยุด marquee ตอน onmousever (0=no. 1=yes) */



var counter_copyspeed=counter_marqueespeed

var counter_pausespeed=(pauseit==0)? counter_copyspeed: 0

var actualwidth=''



function start_marquee () {

  cross_marquee=document.getElementById("marquee");

  cross_marquee.style.left=0;

  marqueewidth=document.getElementById("marqueecontainer").offsetWidth;

  setTimeout('lefttime=setInterval("scroll_users()",50)', delayb4scroll);

}



function scroll_users() {

  if (parseInt(cross_marquee.style.left)>(cross_marquee.offsetWidth*(-1)+8))

    cross_marquee.style.left=parseInt(cross_marquee.style.left)-counter_copyspeed+"px"

  else

    cross_marquee.style.left=marqueewidth+8+"px";

}



//เริ่มต้นการทำงาน counter

if (window.addEventListener) window.addEventListener("load", start_marquee, false)

else if (window.attachEvent) window.attachEvent("onload", start_marquee)

else if (document.getElementById) window.onload=start_marquee

โค้ด Javascript ที่ใช้ครับ สีแดงคือส่วนที่ต้องกำหนดให้ตรงกันกับพื้นที่แสดงผล

ตัวอย่างก็ส่วนแสดงรายชื่อคน online ข้างใต้ counter ครับ

(252)