Script simples em JavaScript usando jQuery para fazer efeito de fade em títulos de notícias, veja o exemplo:
- Campanha incentiva registro civil
- Carga de petróleo está avaliada em US$ 100 milhões.
- Alongamento previne lesões na ‘corrida’
- Obama disputa com Lula preferência no Rio
Para esse efeito usei um arquivo chamado “mask_news.js”, nele contem todas as informações necessárias para o desenvolvimento do script.
Abrindo esse arquivo você perceberá uma linha para dar tempo ao efeito, constando em segundos:
delay = delay || 3000;
Coloquei 3 segundos, mais fica a seu critério aumentar ou diminuir:
Veja o código completo:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Título News</title>
<div style="background: #FF9933;">
<style type="text/css">
#noticias {
list-style: none;
font: 12px Arial;
font-weight: bold;
}
</style>
<script language="javascript" src="jquery-1.2.6.js"></script>
<script language="javascript" src="mask_news.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$("#noticias").newsTicker();
parseSamples();
}
);
</script>
</head>
<body>
<ul id="noticias" style="">
<li>Campanha incentiva registro civil</li>
<li>Carga de petróleo está avaliada em US$ 100 milhões.</li>
<li>Alongamento previne lesões na 'corrida'</li>
<li>Obama disputa com Lula preferência no Rio</li>
</ul>
</body>
</html>
Segue abaixo os arquivos para download:
Baixar: jquery-1.2.6.js
Baixar: mask_news.js