GORAGOD.com

freelance, web developer, web designer, hosting, domain name

โมดูล 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 ครับ

rar (252)
0SHAREFacebookLINE it!
^