無間斷圖片跑馬燈
那看到了一種做法無間斷圖片跑馬燈
看似不錯,但畫面會被拉長...
因綠際會下...不小心在網路上找到了下面這方法
唯因為原作者己不可考...故無法列出處(若原作者有看到,請來信通知,好讓我補上,謝謝)
原始程式如下....原作者的註解我就不做更動
中文部份是我自己加上的註解
//這是要滾動的內容,最好用div包起來
<div id="scrollbarDemo">
這裡是要滾動的內容
</div>
<SCRIPT type="text/javascript">
//這一塊是主要程式運作的地方
var __scrollBarControl = null;
var __divinnerHTML=null;
var __firstTime=true;
function innerBarProp(barID, width, height, interval, direction)
{
this.barID = barID;
this.width = width;
this.height = height;
this.interval = interval;
this.direction = direction;
this.stopScroll = false;
this.maxValue = 0;
this.preValue = 0;
}
function scrollBar()
{
this.barsArray = new Array();
//save current object
__scrollBarControl = this;
}
//////////////////////////////////////////////////////////////////
// add scrollbar to bar list and set properties
// parameters:
// barID: HTML's tag <DIV>'s id property
// (for js access the DIV object)
// width: define the scrollbar's width
// height: define the scrollbar's height
// interval: define the scroll speed
// ( scroll up/down per XX millinSecond )
// direction: scroll direction's defined
// "up"
// "down"
// "left"
// "right"
//////////////////////////////////////////////////////////////////
scrollBar.prototype.addBar = function(barID, width, height, interval, direction)
{
//check parameters
var paraCount = arguments.length;
if ( paraCount < 1 )
{
alert("parameters count incorect!");
return;
//throw "parameters count inccorect!";
}
//width's default value
if ( typeof( width ) == "undefined" )
{
var width = 100;
}
//height's default value
if ( typeof( height ) == "undefined" )
{
var height = 100;
}
//interval's default value
if ( typeof( interval ) == "undefined" )
{
var interval = 1000;
}
//direction's default value
if ( typeof( direction ) == "undefined" )
{
var direction = "up";
}
//create scrollbar's inner properties
var barProp = new innerBarProp(barID, width, height, interval, direction);
var objBar = document.getElementById(barID);
if(__divinnerHTML!=null)
objBar.innerHTML=__divinnerHTML;
else
__divinnerHTML=objBar.innerHTML;
var barCount = this.barsArray.length;
this.barsArray[barCount] = barProp;
}
scrollBar.prototype.clear = function()
{
for(i=0;i<this.barsArray.length;i++)
this.barsArray.pop();
}
scrollBar.prototype.createScrollBars = function()
{
//get bar's count
var barCount = this.barsArray.length;
//if no bar add to scrollControl do nothing
if ( barCount == 0 )
{
return;
}
//init scroll bars
for ( var i=0; i<barCount; i++ )
{
var objBarID = this.barsArray[i].barID;
//if typeof objBarID is object
// that's meaning it inited
//if typeof objBarID is string
// init that scroll bar
if ( typeof( objBarID ) == "string" )
{
//get scroll <DIV> object
var objBar = document.getElementById( objBarID );
if (objBar == null)
{
//objBarID is not exist
if ( document.readyState == "complete" || document.readyState == "loaded" )
{
//the objBarID not exists in current document
//throw "the objBarID is not exists.";
alert("ScrollBar[" + objBarID + "]: not exist!");
return;
}
else
{
//wait for document to load objBarID
window.setTimeout("__scrollBarControl.createScrollBars()",50);
//exit processing..........
//and wait next time callbak
return;
}
}
//update barID
this.barsArray[i].barID = objBar;
}
}
for ( var i=0; i<barCount; i++ )
{
this.innerInitBar(i);
}
}
scrollBar.prototype.innerInitBar = function (index)
{
//get properties
var barID = this.barsArray[index].barID;
var width = this.barsArray[index].width;
var height = this.barsArray[index].height;
var interval = this.barsArray[index].interval;
var direction = this.barsArray[index].direction;
var maxValue = 0;
//set scrollBar's properties
with(barID)
{
style.width = width;
style.height = height;
noWrap=true;
switch( direction )
{
//這裡是實際決定滾動方向及內容的地方
//有up,down,left,right
case "up":
maxValue = Math.max(scrollHeight, height);
style.overflowX = "visible";
style.overflowY = "hidden";
//宣告barHtml來放代入的div裡面的內容
var barHtml = innerHTML;
//將之複製二次,並擺在一個table裡面
//若外面傳入的div裡面的table己寫好
//這裡則可以直接省略,直接使用innerHTML = barHtml+barHtml;來代替
var newHtml = "<table border='0' cellspacing='0' cellpadding='0'>\n";
newHtml += " <tr height='20'>\n";
newHtml += " <td> \n";
newHtml += " </td>\n";
newHtml += " </tr>\n";
newHtml += " <tr>\n";
newHtml += " <td height='" + maxValue + "' valign='top'>\n";
newHtml += barHtml + "\n";
newHtml += " </td>\n";
newHtml += " </tr>\n";
newHtml += " <tr>\n";
newHtml += " <td height='" + maxValue + "' valign='top'>\n";
newHtml += barHtml + "\n";
newHtml += " </td>\n";
newHtml += " </tr>\n";
newHtml += " <tr>\n";
newHtml += " <td height='" + maxValue + "' valign='top'>\n";
newHtml += barHtml + "\n";
newHtml += " </td>\n";
newHtml += " </tr>\n";
newHtml += "</table>\n";
innerHTML = newHtml;
break;
case "down":
maxValue = Math.max(scrollHeight, height);
style.overflowX = "visible";
style.overflowY = "hidden";
var barHtml = innerHTML;
var newHtml = "<table border='0' cellspacing='0' cellpadding='0'>\n";
newHtml += " <tr>\n";
newHtml += " <td height='" + maxValue + "' valign='top'>\n";
newHtml += barHtml + "\n";
newHtml += " </td>\n";
newHtml += " </tr>\n";
newHtml += " <tr>\n";
newHtml += " <td height='" + maxValue + "' valign='top'>\n";
newHtml += barHtml + "\n";
newHtml += " </td>\n";
newHtml += " </tr>\n";
newHtml += "</table>\n";
innerHTML = newHtml;
scrollTop = maxValue;
break;
case "left":
maxValue = Math.max(scrollWidth, width);
style.overflowX = "hidden";
style.overflowY = "visible";
var barHtml = barID.innerHTML;
var newHtml = "<table border='0' cellspacing='0' cellpadding='0' width='" + (maxValue * 2 ) + "'>\n";
newHtml += " <tr>\n";
newHtml += " <td width='" + maxValue + "' valign='top'>\n";
newHtml += barHtml + "\n";
newHtml += " </td>\n";
newHtml += " <td width='" + maxValue + "' valign='top'>\n";
newHtml += barHtml + "\n";
newHtml += " </td>\n";
newHtml += " </tr>\n";
newHtml += "</table>\n";
innerHTML = newHtml;
break;
case "right":
maxValue = Math.max(scrollWidth, width);
style.overflowX = "hidden";
style.overflowY = "visible";
var barHtml = innerHTML;
var newHtml = "<table border='0' cellspacing='0' cellpadding='0' width='" + (maxValue * 2 ) + "'>\n";
newHtml += " <tr>\n";
newHtml += " <td width='" + maxValue + "' valign='top'>\n";
newHtml += barHtml + "\n";
newHtml += " </td>\n";
newHtml += " <td width='" + maxValue + "' valign='top'>\n";
newHtml += barHtml + "\n";
newHtml += " </td>\n";
newHtml += " </tr>\n";
newHtml += "</table>\n";
innerHTML = newHtml;
scrollLeft = maxValue;
break;
default:
//throw "direction is inccorect!";
alert("ScrollBar[" + id + "]: direction is incorect!");
return;
}
//set mouse events
onmouseover = new Function("__scrollBarControl.mouseEvt(" + index + ",true);");
onmouseout = new Function("__scrollBarControl.mouseEvt(" + index + ",false);");
if(__firstTime)
{
__firstTime=false;
window.setInterval("__scrollBarControl.scroll(" + index + ");",interval);
}
//save maxValue
this.barsArray[index].maxValue = maxValue;
}
}
scrollBar.prototype.mouseEvt = function(index, stop)
{
this.barsArray[index].stopScroll = stop;
}
scrollBar.prototype.scroll = function(index)
{
//get properties
var barID = this.barsArray[index].barID;
var width = this.barsArray[index].width;
var height = this.barsArray[index].height;
var interval = this.barsArray[index].interval;
var direction = this.barsArray[index].direction;
var stopScroll = this.barsArray[index].stopScroll;
var preValue = this.barsArray[index].preValue;
var maxValue = this.barsArray[index].maxValue;
if ( stopScroll == true ) return;
switch(direction)
{
case "up":
preValue++;
if ( preValue >= maxValue )
{
preValue = 0;
}
barID.scrollTop = preValue;
break;
case "down":
preValue--;
if ( preValue <= 0 )
{
preValue = maxValue;
}
barID.scrollTop = preValue;
break;
case "left":
preValue++;
if ( preValue >= maxValue )
{
preValue = 0;
}
barID.scrollLeft = preValue;
break;
case "right":
preValue--;
if ( preValue <=0 )
{
preValue = maxValue;
}
barID.scrollLeft = preValue;
break;
}
this.barsArray[index].preValue = preValue;
}
//=================end of file===========================
</SCRIPT>
<SCRIPT type="text/javascript">
//這裡是使用在網頁上的
var scrollBarControl = new scrollBar();
MoveTo("up");
function MoveTo(d)
{
//清除剛才宣告的scrollbarcontrol
scrollBarControl.clear();
//新增一欲滾動的ID,五個參數分別為
//欲滾動的區塊ID,寬,高,速度,方向
scrollBarControl.addBar("scrollbarDemo", 228, 120, 100, d);
scrollBarControl.createScrollBars();
}
</SCRIPT>
在 男丁格爾's 脫殼玩
那看到了一種做法無間斷圖片跑馬燈
看似不錯,但畫面會被拉長...
因綠際會下...不小心在網路上找到了下面這方法
唯因為原作者己不可考...故無法列出處(若原作者有看到,請來信通知,好讓我補上,謝謝)
原始程式如下....原作者的註解我就不做更動
中文部份是我自己加上的註解
//這是要滾動的內容,最好用div包起來
<div id="scrollbarDemo">
這裡是要滾動的內容
</div>
<SCRIPT type="text/javascript">
//這一塊是主要程式運作的地方
var __scrollBarControl = null;
var __divinnerHTML=null;
var __firstTime=true;
function innerBarProp(barID, width, height, interval, direction)
{
this.barID = barID;
this.width = width;
this.height = height;
this.interval = interval;
this.direction = direction;
this.stopScroll = false;
this.maxValue = 0;
this.preValue = 0;
}
function scrollBar()
{
this.barsArray = new Array();
//save current object
__scrollBarControl = this;
}
//////////////////////////////////////////////////////////////////
// add scrollbar to bar list and set properties
// parameters:
// barID: HTML's tag <DIV>'s id property
// (for js access the DIV object)
// width: define the scrollbar's width
// height: define the scrollbar's height
// interval: define the scroll speed
// ( scroll up/down per XX millinSecond )
// direction: scroll direction's defined
// "up"
// "down"
// "left"
// "right"
//////////////////////////////////////////////////////////////////
scrollBar.prototype.addBar = function(barID, width, height, interval, direction)
{
//check parameters
var paraCount = arguments.length;
if ( paraCount < 1 )
{
alert("parameters count incorect!");
return;
//throw "parameters count inccorect!";
}
//width's default value
if ( typeof( width ) == "undefined" )
{
var width = 100;
}
//height's default value
if ( typeof( height ) == "undefined" )
{
var height = 100;
}
//interval's default value
if ( typeof( interval ) == "undefined" )
{
var interval = 1000;
}
//direction's default value
if ( typeof( direction ) == "undefined" )
{
var direction = "up";
}
//create scrollbar's inner properties
var barProp = new innerBarProp(barID, width, height, interval, direction);
var objBar = document.getElementById(barID);
if(__divinnerHTML!=null)
objBar.innerHTML=__divinnerHTML;
else
__divinnerHTML=objBar.innerHTML;
var barCount = this.barsArray.length;
this.barsArray[barCount] = barProp;
}
scrollBar.prototype.clear = function()
{
for(i=0;i<this.barsArray.length;i++)
this.barsArray.pop();
}
scrollBar.prototype.createScrollBars = function()
{
//get bar's count
var barCount = this.barsArray.length;
//if no bar add to scrollControl do nothing
if ( barCount == 0 )
{
return;
}
//init scroll bars
for ( var i=0; i<barCount; i++ )
{
var objBarID = this.barsArray[i].barID;
//if typeof objBarID is object
// that's meaning it inited
//if typeof objBarID is string
// init that scroll bar
if ( typeof( objBarID ) == "string" )
{
//get scroll <DIV> object
var objBar = document.getElementById( objBarID );
if (objBar == null)
{
//objBarID is not exist
if ( document.readyState == "complete" || document.readyState == "loaded" )
{
//the objBarID not exists in current document
//throw "the objBarID is not exists.";
alert("ScrollBar[" + objBarID + "]: not exist!");
return;
}
else
{
//wait for document to load objBarID
window.setTimeout("__scrollBarControl.createScrollBars()",50);
//exit processing..........
//and wait next time callbak
return;
}
}
//update barID
this.barsArray[i].barID = objBar;
}
}
for ( var i=0; i<barCount; i++ )
{
this.innerInitBar(i);
}
}
scrollBar.prototype.innerInitBar = function (index)
{
//get properties
var barID = this.barsArray[index].barID;
var width = this.barsArray[index].width;
var height = this.barsArray[index].height;
var interval = this.barsArray[index].interval;
var direction = this.barsArray[index].direction;
var maxValue = 0;
//set scrollBar's properties
with(barID)
{
style.width = width;
style.height = height;
noWrap=true;
switch( direction )
{
//這裡是實際決定滾動方向及內容的地方
//有up,down,left,right
case "up":
maxValue = Math.max(scrollHeight, height);
style.overflowX = "visible";
style.overflowY = "hidden";
//宣告barHtml來放代入的div裡面的內容
var barHtml = innerHTML;
//將之複製二次,並擺在一個table裡面
//若外面傳入的div裡面的table己寫好
//這裡則可以直接省略,直接使用innerHTML = barHtml+barHtml;來代替
var newHtml = "<table border='0' cellspacing='0' cellpadding='0'>\n";
newHtml += " <tr height='20'>\n";
newHtml += " <td> \n";
newHtml += " </td>\n";
newHtml += " </tr>\n";
newHtml += " <tr>\n";
newHtml += " <td height='" + maxValue + "' valign='top'>\n";
newHtml += barHtml + "\n";
newHtml += " </td>\n";
newHtml += " </tr>\n";
newHtml += " <tr>\n";
newHtml += " <td height='" + maxValue + "' valign='top'>\n";
newHtml += barHtml + "\n";
newHtml += " </td>\n";
newHtml += " </tr>\n";
newHtml += " <tr>\n";
newHtml += " <td height='" + maxValue + "' valign='top'>\n";
newHtml += barHtml + "\n";
newHtml += " </td>\n";
newHtml += " </tr>\n";
newHtml += "</table>\n";
innerHTML = newHtml;
break;
case "down":
maxValue = Math.max(scrollHeight, height);
style.overflowX = "visible";
style.overflowY = "hidden";
var barHtml = innerHTML;
var newHtml = "<table border='0' cellspacing='0' cellpadding='0'>\n";
newHtml += " <tr>\n";
newHtml += " <td height='" + maxValue + "' valign='top'>\n";
newHtml += barHtml + "\n";
newHtml += " </td>\n";
newHtml += " </tr>\n";
newHtml += " <tr>\n";
newHtml += " <td height='" + maxValue + "' valign='top'>\n";
newHtml += barHtml + "\n";
newHtml += " </td>\n";
newHtml += " </tr>\n";
newHtml += "</table>\n";
innerHTML = newHtml;
scrollTop = maxValue;
break;
case "left":
maxValue = Math.max(scrollWidth, width);
style.overflowX = "hidden";
style.overflowY = "visible";
var barHtml = barID.innerHTML;
var newHtml = "<table border='0' cellspacing='0' cellpadding='0' width='" + (maxValue * 2 ) + "'>\n";
newHtml += " <tr>\n";
newHtml += " <td width='" + maxValue + "' valign='top'>\n";
newHtml += barHtml + "\n";
newHtml += " </td>\n";
newHtml += " <td width='" + maxValue + "' valign='top'>\n";
newHtml += barHtml + "\n";
newHtml += " </td>\n";
newHtml += " </tr>\n";
newHtml += "</table>\n";
innerHTML = newHtml;
break;
case "right":
maxValue = Math.max(scrollWidth, width);
style.overflowX = "hidden";
style.overflowY = "visible";
var barHtml = innerHTML;
var newHtml = "<table border='0' cellspacing='0' cellpadding='0' width='" + (maxValue * 2 ) + "'>\n";
newHtml += " <tr>\n";
newHtml += " <td width='" + maxValue + "' valign='top'>\n";
newHtml += barHtml + "\n";
newHtml += " </td>\n";
newHtml += " <td width='" + maxValue + "' valign='top'>\n";
newHtml += barHtml + "\n";
newHtml += " </td>\n";
newHtml += " </tr>\n";
newHtml += "</table>\n";
innerHTML = newHtml;
scrollLeft = maxValue;
break;
default:
//throw "direction is inccorect!";
alert("ScrollBar[" + id + "]: direction is incorect!");
return;
}
//set mouse events
onmouseover = new Function("__scrollBarControl.mouseEvt(" + index + ",true);");
onmouseout = new Function("__scrollBarControl.mouseEvt(" + index + ",false);");
if(__firstTime)
{
__firstTime=false;
window.setInterval("__scrollBarControl.scroll(" + index + ");",interval);
}
//save maxValue
this.barsArray[index].maxValue = maxValue;
}
}
scrollBar.prototype.mouseEvt = function(index, stop)
{
this.barsArray[index].stopScroll = stop;
}
scrollBar.prototype.scroll = function(index)
{
//get properties
var barID = this.barsArray[index].barID;
var width = this.barsArray[index].width;
var height = this.barsArray[index].height;
var interval = this.barsArray[index].interval;
var direction = this.barsArray[index].direction;
var stopScroll = this.barsArray[index].stopScroll;
var preValue = this.barsArray[index].preValue;
var maxValue = this.barsArray[index].maxValue;
if ( stopScroll == true ) return;
switch(direction)
{
case "up":
preValue++;
if ( preValue >= maxValue )
{
preValue = 0;
}
barID.scrollTop = preValue;
break;
case "down":
preValue--;
if ( preValue <= 0 )
{
preValue = maxValue;
}
barID.scrollTop = preValue;
break;
case "left":
preValue++;
if ( preValue >= maxValue )
{
preValue = 0;
}
barID.scrollLeft = preValue;
break;
case "right":
preValue--;
if ( preValue <=0 )
{
preValue = maxValue;
}
barID.scrollLeft = preValue;
break;
}
this.barsArray[index].preValue = preValue;
}
//=================end of file===========================
</SCRIPT>
<SCRIPT type="text/javascript">
//這裡是使用在網頁上的
var scrollBarControl = new scrollBar();
MoveTo("up");
function MoveTo(d)
{
//清除剛才宣告的scrollbarcontrol
scrollBarControl.clear();
//新增一欲滾動的ID,五個參數分別為
//欲滾動的區塊ID,寬,高,速度,方向
scrollBarControl.addBar("scrollbarDemo", 228, 120, 100, d);
scrollBarControl.createScrollBars();
}
</SCRIPT>