Como colocar um ticker de notícias em javascript

Vamos falar sobre como implementar um ticker de notícias em Javascript que é um feed via RSS.

Ontem eu postei um script simples explicando como colocar facilmente um feed RSS em seu site. No entanto, apenas exibir as manchetes não é tão legal. Ter as manchetes em um ticker é muito mais agradável.

Ainda usando o Yahoo! Notícias como fonte, hoje vamos ver como colocar um RSS feed de notícias em um ticker.

O código a seguir faz isso.

<html>
<head>
<script type="text/javascript">
var sText = ""
var i=0
var iNews=0
var rss = new ActiveXObject("Microsoft.XMLDOM")
rss.async = false
rss.load("http://rss.news.yahoo.com/rss/world")

function GetNewsSource(){
var itemNodes = rss.selectNodes("/rss/channel/item")
var iMax = itemNodes.length

sText = itemNodes.item(iNews).getElementsByTagName("title").item(0).text
myTicker.href = itemNodes.item(iNews).getElementsByTagName("link").item(0).text
ticker()
iNews+=1
if(iNews==iMax){
iNews=0
}
window.setTimeout("GetNewsSource()", (90*sText.length +4000))
}

function ticker(){
i+=1
myTicker.innerText = sText.substring(0,i) + "*"
if(i<sText.length){
window.setTimeout("ticker()",90)
}
else{
i=0
}
}
</script>
</head>
<body onLoad="GetNewsSource()">
<p><b>Yahoo! News: <a id="myTicker" href=""></a></b></p>
</body>
</html>


Fazemos uso da função window.setTimeout. O setTimeout é usado para chamar outra função após um determinado período de tempo. A duração é especificada em milissegundos.

O primeiro script carrega o arquivo RSS feed no DOM enquanto a página é carregada. Quando o evento no corpo da tag se carrega, a função GetNewsSource () é chamada. Esta função lê os itens de um arquivo RSS em uma NodeList variável e extrai o elemento título numa variável sText, e o elemento de link em um hiperlink myTicker com propriedade href. Uma vez feito isso, o script solicita a função ticker () que grava o conteúdo da sText caracter a caracter. A função ticker () executa recursivamente através da função setTimeout com cada caracter sendo escrito após 90 milissegundos.

A função GetNewsSource () também executa recursivamente, e é definido (90 * sText.length +4000) como uma duração setTimeout. Isso garante que a próxima execução só aconteça depois da função relógio ()ter acabado de escrever o conteúdo completo da sText.

Para aperfeiçoar o script, verifique se a manchete sendo escrita é a última do feed, e em caso afirmativo, redefina o feed back para o primeiro item.

E aí está, um ticker de notícias em seu site.