2016年2月18日 星期四

Javascript 跑馬燈 Marquee 2種方法 (ex. 讀取中, 請稍候...)

方法1

( for IE only )

javascript 內容

var it=0
function initialize(){
mytext=typing.innerText
var myheight=typing.offsetHeight
typing.innerText=''
document.all.typing.style.height=myheight
typeit()
}
function typeit(){
typing.insertAdjacentText("beforeEnd",mytext.charAt(it))
if (it < mytext.length - 1)
{
it++
setTimeout("typeit()",100)
}
return
}
if (document.all)
document.body.onload=initialize

html部份如下:

< SPAN id=typing style="FONT-SIZE: 18pt; COLOR: #1A61A9; FONT-FAMILY: 新細明體; LETTER-SPACING: 2pt">讀取中, 請稍候‥‥‥‥‥‥< /SPAN>

方法2

( for IE CHROME FIREFOX )

javascript 內容

var text = "讀取PNR中, 請稍候‥‥‥‥‥‥";
var delay=50;
var currentChar=1;
var destination="[not defined]";

function type()
{
  if (document.getElementById)
  {
    var dest=document.getElementById(destination);
    if (dest)// && dest.innerHTML)
    {
      dest.innerHTML=text.substr(0, currentChar);
      //dest.innerHTML+=text[currentChar-1];
      currentChar++
      if (currentChar>text.length)
      {
        currentChar=1;
        setTimeout("type()", 5000);
      }
      else
      {
        setTimeout("type()", delay);
      }
    }
  }
}

function startTyping(textParam, delayParam, destinationParam)
{
  text=textParam;
  delay=delayParam;
  currentChar=1;
  destination=destinationParam;
  type();
}

html部份如下:

< body onload="startTyping(text, 50, 'textDestination');">
...
< /body>

沒有留言:

張貼留言