用Javascript實做無縫跑馬燈

 Thu, 26 Jan 2006 15:46:01 +0800

用HTML的marquee來製作的跑馬燈，會有一個問題，就是畫面會出現一段空白。

要避免這個問題，就必須用javascript搭配DHTML的方式來做出跑馬燈的效果來。

先定義一個基本的訊息輪播物件：

function messages () {
this.msgQueue = new Array();//存放訊息的陣列
this.msgInterval = 1;//訊息輪播的間隔
this.msgCurrent = 0;//目前播放的訊息
this.msgTarget = "";//顯示訊息的物件id
this.intervalId = null;//用來存放interval或是timer的id，以便做出暫停的效果
this.pauseState = 0;//存放播放的狀態，用來判斷是在播放或是暫停
}
messages.prototype.addMsg = function (msg) {//新增訊息到訊息陣列
this.msgQueue.push(msg);
}
messages.prototype.getMsgInterval = function () {//取得訊息播放的間隔
return this.msgInterval;
}
messages.prototype.setMsgInterval = function (interval) {//設定訊息播放的間隔
this.msgInterval = interval;
}
messages.prototype.setMsgTarget = function (id) {//設定訊息播放的目標id
this.msgTarget = id;
}
messages.prototype.getMsgTarget = function () {//取得訊息播放的目標id
return this.msgTarget;
}

接著再延伸message物件，加入顯示及暫停等操作方法。

function dynamicMsg () {
this.container = document.createElement("div");//訊息將在這個div中顯示
this.roller1 = document.createElement("div");//用兩個div頭接尾做出不間斷播放的效果
this.roller2 = document.createElement("div");
this.currentPos = 0;//以下用來存放訊息移動的位置
this.rollerTop = 0;
this.rollerLeft = 0;
this.rollerRight = 0;
this.rollerBottom = 0;
}
dynamicMsg.prototype = new messages;//繼承messages物件
dynamicMsg.prototype.display = function (width, height, border, delay, color) {
try{
if (this.msgQueue.length == 0) throw "No message in queue!!!";
if (this.msgTarget == "") throw "You must assign an object id for displaying messages!!!";
var obj = document.getElementById(this.msgTarget);
if (obj == null) throw "Object with the assigned id:"+this.msgTarget+" cannot be found!!!";
var callobj = this;//把this指標存到變數，等一下才有辦法讓網頁的事件來使用
obj.innerHTML = "";
obj.appendChild(this.container);
var img = document.createElement("img");//用一個透明的gif把container撐到指定的大小
img.src = "images/blank.gif";
img.height = height;
img.width = width;
img.border = "0";
obj.appendChild(img);
this.container.style.position = "absolute";//position必須設為absolute，clip才會發生作用
this.container.style.width = width+"px";
this.container.style.height = height+"px";
this.container.style.border = "solid "+border+"px";
this.container.style.background = color;
this.container.style.overflow = "hidden";
this.container.style.clip = "rect(0,"+width+","+height+",0)";
this.container.innerHTML = "";
this.container.onmousemove = function(){callobj.pause(1);};
this.container.onmouseout = function(){callobj.pause(0);};
var tmp = "";
for (i=0;i<this.msgQueue.length;i++) {//把訊息陣列中的訊息取出，一則訊息一行來顯示
tmp += this.msgQueue[i];
if (i != this.msgQueue.length-1) {
tmp += "<br>";
}
}
this.roller1.style.top = "0px";
this.roller1.innerHTML = "";
this.roller1.innerHTML = tmp;
this.roller1.style.position = "relative";
this.container.appendChild(this.roller1);
this.rollerTop = this.roller1.offsetTop;
this.rollerLeft = this.roller1.offsetLeft;
this.rollerRight = this.rollerLeft + this.roller1.offsetWidth;
this.rollerBottom = this.rollerTop + this.roller1.offsetHeight;
this.currentPos = 0;
this.container.appendChild(this.roller2);
this.roller2.innerHTML = "";
this.roller2.innerHTML = tmp;
this.roller2.style.position = "relative";
this.roller2.style.top = "0px";
this.msgInterval = delay;
this.intervalId = window.setInterval(function(){callobj.rotate();},this.msgInterval*100);
}
catch (e) {
alert(e);//顯示例外的訊息
}
}
dynamicMsg.prototype.rotate = function () {//做出向上捲動的效果
this.roller1.style.top = --this.currentPos + "px";
this.roller2.style.top = this.currentPos + "px";
if ((this.currentPos + this.roller1.offsetHeight) == 0) {
this.currentPos = 0;
}
}
dynamicMsg.prototype.pause = function (status) {//做出暫停/繼續播放的效果
if (status == 1) {
this.pauseState = status;
clearInterval(this.intervalId);
return;
}
if (status == 0) {
this.pauseState = status;
var callobj = this;
this.intervalId = setInterval(function(){callobj.rotate();},this.msgInterval*100);
return;
}
}

使用的時候，需要用幾個步驟：

  1. 產生一個dynamicMsg物件實體
  2. 用addMsg方法加入要捲動的訊息（內含html的字串）
  3. 用setMsgTarget方法來指定要顯示的上層物件的id（字串，不是物件）
  4. 用display方法來顯示（傳入的參數依序為：寬、高、框的厚度、捲動頻率、背景顏色）
應讀者要求，以下是簡單的使用的範例，前面的程式也做了一點修改（2007/10/5）： 

var a = new dynamicMsg();
a.addMsg("產生一個dynamicMsg物件實體");
a.addMsg("用addMsg方法加入要捲動的訊息（內含html的字串）");
a.addMsg("用setMsgTarget方法來指定要顯示的上層物件的id（字串，不是物件）");
a.addMsg("用display方法來顯示（傳入的參數依序為：寬、高、框的厚度、捲動頻率、背景顏色）");
a.setMsgTarget("panel");
a.display(320,30,1,1,"#AABBCC");
a.container.style.fontSize = "12px";

有圖有真相：

dynamic message demo