Lag et nytt ticker med PHP og jQuery News Ticker

Du lovte en venn til å hjelpe ham å skape et vakkert område for virksomheten hans. Jeg vet at du har, for meg minst tre eller fire ganger, selvfølgelig, alltid i verste arbeidet taler.

Vanligvis forespørsler er lave i begynnelsen. "Trenger jeg en statisk skjerm der ... du sette meg to dager tre år med Visual Studio kodesnutter og så videre Men programmereren kjenner at vennen tankene, noen ganger i god tro, andre litt mindre.

Siden du forstår at jeg er igjen i denne delikate situasjonen og forespørselen er ikke forventet denne gangen om en nyhetsmelding ticker. Vel, egentlig verre enn jeg trodde, så jeg kommer til å arbeide for å prøve noe hyggelig og tilpasses.
Først finner jeg Googles søkesider jQuery News Ticker . Overbevis meg.
'S HTML for å lage enkle, velskrevet dokumentasjon, utslippet. Nå som det første skrittet til det andre problemet er løst: vennen min har ikke en DB ...

Løsningen

Hvis det er en DB kan alltid bruke tekstfiler for nyheter, heldigvis min venn vet hvordan du bruker 'ftp, det eneste problemet er å sørge for at det ikke bør kaste bort for mye tid til å lage sine egne nyheter. Jeg velger dette anlegget:

Det vil være lett å bringe nyheter som enkel tekst filer under mappen med samme navn og bilder i bildene undermappen. Ett forbeholdet: samme navn for sine nyheter og image (med mindre utvidelsen).

For resten er det å ha en mappe hvor du skal plassere klasser den eneste klassen som brukes, mappen js jQuery, ticker, som initialiserer fil og en mappe for css stiler.

Via også legge ved en skjermdump av Eclipse-prosjektet skapelsen.

Den JS

I tillegg til den nyeste jQuery (1.6.1 i skrivende stund) tar jeg pakken jQuery News Ticker jquery.ticker.js filen. Du bør ikke endre noe, lager jeg bare en fil å initialisere ticker til DOM Ready newsloader.js.

newsloader.js

 / / DOM-klar







 $ (Function () {



  



 / / Opprett ticker



  



 $ ('# Js-news »). Børstelegrafer ({



    



 ajaxFeed: falsk, / / ​​ingen mate



    



 htmlFeed: sant, er / / html



    



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



    



 DisplayType: 'fade', / / ​​Reveal eller falme, fade velger



    



 retning: "ltr", / / ​​retning ticker



    



 pauseOnItems: 5000, / / ​​tar seg tid til å lese nyheter til navigator!



    



 fadeInSpeed: 600, / / ​​fade-inn hastighet



    



 fadeOutSpeed: 300 / / fade-out speed



  



 });







 });

Skriptet gjør er å lage ticker til DOM Ready, passerer alternativene nyttig, spesielt i dette tilfellet valgte jeg å bruke fade og ikke avsløre den rene estetiske valg.
Merk: Avslør skaper effekten av "skrive-on" som gjør så mye skrivemaskin.
En annen viktig innstilling pauseOnItems jeg satt til 5 sekunder for å gi tid for leseren å komme til bunns i nyhetene.

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