Criar um ticker de notícias com PHP e jQuery notícias Ticker

Você prometeu a um amigo para ajudá-lo a criar um site bonito para o seu negócio. Eu sei que você tem, para mim vezes, pelo menos, três ou quatro, é claro, sempre no pior trabalho fala.

Geralmente as solicitações são baixos no início:. "Preciso de uma exposição estática lá ... você me dois dias três anos de código Visual Estúdio trechos e assim por diante Mas o programador sabe que a mente amigo, às vezes de boa fé, outros um pouco menos.

Uma vez que você entenda que eu sou, mais uma vez nesta situação delicada eo pedido não se espera desta vez sobre um ticker de notícias. Bem, basicamente pior do que eu pensei, assim que eu começar a trabalhar para tentar algo de bom e personalizável.
No começo eu achar o site de busca Google News Ticker JQuery . Convencer-me.
'S HTML para criar simples, a documentação bem escrita, a descarga. Agora que o primeiro passo para o segundo problema é resolvido: meu amigo não tem um DB ...

A solução

Se houver um DB sempre pode usar arquivos de texto para a notícia, felizmente o meu amigo sabe como usar o ftp ', o único problema é ter certeza que ele não deve perder muito tempo para criar suas próprias notícias. Eu optar por esta facilidade:

Será fácil para trazer a notícia como arquivos de texto simples na pasta de mesmo nome e imagens para a subpasta de imagens. Uma advertência: o mesmo nome do seu noticiário e imagem (a menos que a extensão).

Para o resto é ter uma pasta onde colocar as classes a única classe que é usado, a pasta js jQuery, o ticker, que inicializar o arquivo e uma pasta para os estilos css.

Via também anexar um screenshot da criação do projeto Eclipse.

A JS

Além do mais recente JQuery (1.6.1 no momento em que escrevo) eu levo o pacote JQuery News Ticker jquery.ticker.js o arquivo. Você não deve mudar nada, eu criar apenas um arquivo para inicializar o ticker para o newsloader.js DOM Ready.

newsloader.js

 / / DOM-pronto







 $ (Function () {



  



 / / Cria o ticker



  



 $ ('# Js-news'). Tickers ({



    



 ajaxFeed: false, / / ​​feed não



    



 htmlFeed: true, / / ​​html é



    



 TitleText: "Breaking News ', / / ​​ticker



    



 DisplayType: 'desaparecer', / / ​​Revelar ou fade, fade escolha



    



 direção: 'ltr', / ticker / direção



    



 pauseOnItems: 5000, / / ​​ter tempo para ler a notícia para o navegador!



    



 fadeInSpeed: 600, velocidade / / fade-in



    



 fadeOutSpeed: 300 / / fade-out velocidade



  



 });







 });

O script faz é criar o ticker para o Pronto DOM, passando as opções útil, especialmente neste caso, eu escolhi usar o fade e não revelar a escolha pura estética.
Nota: A revelação cria o efeito de "write-on" que faz máquina de escrever tanto.
Outra definição importante que eu pauseOnItems definido como 5 segundos para dar tempo para que o leitor chegar ao fundo da notícia.

• <<
• 1
• 2
• 3
• 4
• 5
• >>