โมดูล Marquee
marquee เป็นอีก tag หนึ่งที่ไม่มีใน XHTML หากจำเป็นต้องใช้ ให้ใช้ module นี้ครับ
โค้ดในพื้นที่ส่วนแสดงผลครับ ส่วนสีแดง เป็น id ที่ต้องกำหนดให้ตรงกันกับใน Javascript ครับ
อันนี้เป็นส่วนกำหนดรูปแบบของพื้นที่แสดงผล ส่วนสีแดงเป็นส่วนที่ต้องกำหนดครับ
โค้ด Javascript ที่ใช้ครับ สีแดงคือส่วนที่ต้องกำหนดให้ตรงกันกับพื้นที่แสดงผล
ตัวอย่างก็ส่วนแสดงรายชื่อคน online ข้างใต้ counter ครับ
<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 ครับ