Opret en news ticker med PHP og jQuery News Ticker

Du lovede en ven at hjælpe ham med at skabe et smukt sted for hans virksomhed. Jeg ved, du har, for mig mindst tre eller fire gange, selvfølgelig, altid i det værste arbejde taler.

Normalt anmodningerne er lave i starten:. "Jeg har brug for en statisk udstilling der ... du sætter mig to dage tre år af Visual Studio kodestumper og så videre Men den programmør ved, at vennen sind, til tider i god tro. andre lidt mindre

Da du forstå, at jeg igen i denne vanskelige situation, og anmodningen forventes ikke denne gang om en nyhed ticker. Nå dybest set værre end jeg troede, så jeg kommer til at arbejde for at prøve noget rart og tilpasses.
I første omgang finder jeg Googles søgeside JQuery News Ticker . Overbevis mig.
'S HTML til at skabe enkle, velskrevet dokumentation af decharge. Nu, hvor det første skridt til det andet problem er løst: min ven ikke har en DB ...

Løsningen

Hvis der er en DB kan altid bruge tekst filer til nyheder, heldigvis er min ven ved, hvordan man bruge 'ftp, det eneste problem er at sikre, at den ikke skal spilde for meget tid til at skabe sine egne nyheder. Jeg vælger denne facilitet:

Det vil være nemt at bringe nyhederne som simpel tekst filer under den mappe af samme navn og billeder ind i billeder undermappe. Et forbehold: det samme navn for sine nyheder og image (medmindre udvidelsen).

For resten det er at have en mappe hvor man kan sætte klasser den eneste klasse, der bruges, mappen js jQuery, ticker, som initialisere fil og en mappe til css stilarter.

Via også vedhæfte et screenshot af Eclipse projektet skabelse.

Den JS

Ud over de seneste JQuery (1.6.1 i skrivende stund) Jeg tager pakken JQuery News Ticker jquery.ticker.js filen. Du bør ikke ændre noget, jeg kun oprette én fil for at initialisere ticker til DOM Klar newsloader.js.

newsloader.js

 / / DOM-klar







 $ (Function () {



  



 / / Opret ticker



  



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



    



 ajaxFeed: falsk, / / ​​ingen foder



    



 htmlFeed: true, / / ​​html er



    



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



    



 DisplayType: 'fade', / / ​​Reveal eller fade, fade vælge



    



 retning: 'ltr.', / / ​​retning ticker



    



 pauseOnItems: 5000, / / ​​tager sig tid til at læse nyheden til navigatoren!



    



 fadeInSpeed: 600, / / ​​fade-in hastighed



    



 fadeOutSpeed: 300 / / fade-out hastighed



  



 });







 });

Scriptet gør, er at skabe den ticker til DOM Klar, der passerer de muligheder nyttige, især i dette tilfælde valgte jeg at bruge de fade og ikke afslører det store æstetiske valg.
Bemærk: Reveal skaber effekten af "Write-on", der betyder så meget skrivemaskine.
En anden vigtig indstilling pauseOnItems jeg sat til 5 sekunder for at give tid til læseren at komme til bunds i nyhederne.

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