Título de Notícia com efeito “Fade” em jQuery

18/11/2008

Agência OFF, desenvolvimento de soluções web para as Agências Digitais

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

Agência OFF, desenvolvimento de soluções web para as Agências Digitais


por Ted k' |
8 Comentários |
JavaScript / Ajax / DHTML

8 Respostas para Título de Notícia com efeito “Fade” em jQuery

  1. Max Da Pieve 17/07/2009 at 3:49 PM | Permalink |

    Olá foi de grande ajuda este post, consegui adptar em em um site que desenvolvi para terceiros.
    Obrigado.

    Max Da Pieve BH

  2. Pablo 28/07/2010 at 10:01 AM | Permalink |

    Excelente post!

    Obrigado!

  3. Fabio Mascarenhas 09/06/2011 at 2:12 PM | Permalink |

    Amigo, este artigo é nota 10.
    Mas para mim não deu muito certo, estou montando aquela através do banco de dados, porém o .NET coloca vários IDs diferentes em Spams. Então, informando o ID #noticias no LI somente não adianta porque a estrutura dica +/- assim:

    Bla Bla bla

    Bla Bla bla

    Bla Bla bla

    E dessa forma ele não se aplica.
    Você tem alguma idéia de como pode funcionar ?

  4. Fabio Mascarenhas 09/06/2011 at 2:18 PM | Permalink |

    Não não deu certo o código,

    **
    ** Bla Bla bla
    **
    ** Bla Bla bla
    **
    ** Bla Bla bla

    Você tem alguma idéia de como pode funcionar mesmo assim ?

  5. Fabio Mascarenhas 09/06/2011 at 2:19 PM | Permalink |

    Desculpe, não sei como colar o exemplo do código fonte aqui…

  6. Ted k' 10/06/2011 at 12:03 AM | Permalink |

    Cara eu não entendi bem, tem a possibilidade de colocar o link de um print disso ai?

  7. Fabio Mascarenhas 10/06/2011 at 2:31 PM | Permalink |

    Ted,
    Já consegui resolver o probleminha, porém agora tenho outro, a questão é a seguinte, o conteúdo que está rolando para de funcionar quando clico num botão para visualizar outras notícias (PopupExtender), aí a rolagem para de acontecer.
    o link é http://amesco.dominiotemporario.com/novosite/legislacao.aspx.

  8. Ted k' 10/06/2011 at 2:54 PM | Permalink |

    Cara, eu não entendi bem, explica novamente?

Deixe seu Comentário