跑馬燈解決方案 [無障礙]

在無障礙網頁需求下(關於無障礙網頁請參考連結),
跑馬燈元件(Marquee Tag)會在AA的機器測試遇到檢測不過的窘境,
所以撰寫了簡單的Script來替代跑馬燈元件,
至於人工檢測會不會通過,就要看文字滑動速度、字級、配色囉...
原始碼如下,使用時請勿拿掉最上方的版權宣告...

<script language="JavaScript" type="text/JavaScript">
/*==============================================================================
功能:文字型跑馬燈(單一訊息)
作者:Alex Chen
E-Mail:yizi6124@gmail.com
版本:1.0
完成:2004/10/13
※需先在body新增一個圖層(DIV),並命名為ScriptDiv
================================================================================*/
//以下可編輯
var maxstr = 10;//訊息長度
var msg = "玉山山塊因歐亞大陸及菲律賓板塊互相擠撞而高隆,主稜山脈略成雙十字形";//訊息內文
var url = "XXX.htm";//訊息連結路徑
var speed = 600;//滑動速度
var f_color = "#552288";//字體顏色
var f_size = "10pt";//字體大小
var b_color = "#00FF00";//背景顏色
var div_w = 180;//圖層寬度


//以下不可編輯
var len = msg.length;
var str ="";
var ss="";
var pos=1;
var i = 0;
var x = 1;
var spnfirst="";
var spnend="";
var urlfirst="";
var urlend="";
//
function playMsg(){
ss="";
str="";
for(m=i;m<maxstr;m++){ss += " ";}//不滿訊息長度補空白;
if(i<maxstr){//如果小於訊息長度,由第一個字逐步取到訊息長度
str = ss + msg.substr(0,x);
i+=1;
}else
{
str = ss + msg.substr(pos,maxstr);//如果大於訊息長度,則開始由訊息長度後一個長度為位移開始的位置,長度為訊息長度
pos+=1;
i+=1;
}
if(i>(len+maxstr)){//如果取出開始會置已超過訊息的總長度,全部歸零,重頭計算,也就是Replay
str ="";
ss="";
pos=1;
i = 0;
x = 1;
}
if(url.length>0){urlfirst="<a href='"+url+"'>";urlend="</a>"}
spnfirst="<span style='color:"+ f_color +";font-size:"+ f_size +" '>";
spnend = "</span>"
//ScriptDiv.innerHTML = spnfirst + urlfirst + str + urlend + spnend ;
ScriptDiv.style.backgroundColor=b_color;
ScriptDiv.style.width = div_w;
ScriptDiv.innerHTML = urlfirst + spnfirst + str + spnend + urlend ;//插入訊息至容器中
x+=1;
}
setInterval("playMsg()",speed);//啟動訊息函數
//============文字型跑馬燈(單一訊息)[結束]=============
</script>

沒有留言: