Crear un ticker de notícies amb PHP i jQuery News Ticker

Li vaig prometre a un amic per ajudar a crear un gran lloc per al seu negoci. Jo sé que vostè té, per a mi almenys tres o quatre, per descomptat, sempre en el pitjor treball parla.

En general, les sol · licituds són baixos al començament:. "Necessito una pantalla estàtica ... pren dos dies de tres anys de Visual Studio fragments de codi i així successivament, però el programador sap que la ment amic, de vegades de bona fe, altres una mica menys.

Ja que entenc que sóc nou en aquesta delicada situació, i la sol · licitud no s'espera que aquesta vegada sobre un ticker de notícies. Bé, bàsicament, pitjor del que pensava, així que mans a l'obra per intentar alguna cosa agradable i personalitzable.
Al principi, em sembla el lloc de cerca de Google News Ticker JQuery . Convèncer a mi.
El codi HTML per crear és simple i ben escrita, la documentació, la descàrrega. Ara que el primer pas per al segon problema es resol: el meu amic no té una base de dades ...

La solució

Si hi ha una base de dades sempre es pot utilitzar arxius de text per a les notícies, per sort, el meu amic sap com utilitzar el ftp, l'únic problema és assegurar-se que no s'ha de perdre massa temps per crear les seves pròpies notícies. Opto per la següent estructura:

Serà fàcil per portar les notícies com a simples arxius de text en la carpeta del mateix nom i les imatges a la subcarpeta d'imatges. Una advertència: el mateix nom per a la seva notícia i la imatge (a menys que l'extensió).

D'altra banda, és tenir una carpeta on col · locar les classes l'única classe que s'utilitza, per jQuery carpeta js, la clau de pissarra, que inicialitzar l'arxiu i una carpeta d'estils css.

Via també adjuntar una captura de pantalla de la creació del projecte Eclipse.

El JS

A més de les últimes jQuery (1.6.1 en el moment d'escriure això) em prenc la jquery.ticker.js arxiu del paquet de JQuery Ticker News. No ha de canviar res, només cal crear un arxiu per iniciar la cotització a la newsloader.js DOM Ready.

newsloader.js

 / / DOM llest







 $ (Function () {



  



 / / Crear la clau de pissarra



  



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



    



 ajaxFeed: false, / / ​​no alimentació



    



 htmlFeed: true, / / ​​html és



    



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



    



 DisplayType: 'fade', / / ​​revelen o s'esvaeixen, s'esvaeixen triar



    



 direcció: 'ltr', / / ​​direcció ticker



    



 pauseOnItems: 5000, / / ​​es pren el temps per llegir les notícies per al navegador!



    



 fadeInSpeed: 600, / / ​​fade-in de velocitat



    



 fadeOutSpeed: 300 / / fade-out de velocitat



  



 });







 });

L'script fa és crear la clau de pissarra a la DOM Llest opcions de passada útil, especialment en aquest cas vaig optar per usar l'efecte d'atenuació i de no revelar l'elecció estètica pura.
Nota: revelar l'efecte crea la "escriptura en procés" que fa la màquina d'escriure tant.
Un altre ajust important pauseOnItems em vaig posar a 5 segons per donar temps als lectors a arribar al fons de la notícia.

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