Maak een lichtkrant met PHP en jQuery News Ticker

U beloofde een vriend om u te helpen een geweldige site maakt voor zijn bedrijf. Ik weet dat je, voor mij minstens drie of vier keer, natuurlijk altijd in het ergste werk spreekt.

Meestal zijn de verzoeken zijn laag in het begin:. "Ik heb een static display ... je twee dagen heb ik drie jaar van Visual Studio code snippets en zo verder, maar de programmeur weet dat de vriend geest, soms te goeder trouw, anderen iets minder.

Aangezien u begrijpen dat ik nog eens in deze delicate situatie, en het verzoek wordt niet verwacht dat deze keer over een nieuws-ticker. Nou ja eigenlijk nog erger dan ik dacht, dus ik aan de slag om iets leuks en aanpasbare proberen.
In eerste instantie vind ik de zoeksite van Google JQuery News Ticker . Overtuig mij.
De 'HTML te creëren is eenvoudig, goed geschreven documentatie, de ontlading. Nu dat de eerste stap naar de tweede probleem is opgelost: mijn vriend heeft geen DB ...

De oplossing

Als er een DB kan altijd tekstbestanden te gebruiken voor nieuws, gelukkig, mijn vriend weet hoe het gebruik van de 'ftp, het enige probleem is ervoor te zorgen dat het niet al te veel tijd om zijn eigen nieuws te maken van afval. Ik kies voor deze structuur:

Het zal gemakkelijk zijn om het nieuws als simpele tekst bestanden in de map met dezelfde naam en beelden in de beelden submap te brengen. Een waarschuwing: het dezelfde naam voor zijn nieuws en foto (tenzij de extensie).

Voor de rest het is om een map waar gaan we klassen de enige klasse die wordt gebruikt voor jQuery JS map, de ticker, die het bestand en een map voor CSS-stijlen te initialiseren.

Via ook hechten een screenshot van de Eclipse-project schepping.

De JS

In aanvulling op de nieuwste jQuery (1.6.1 op het moment van schrijven) Ik neem het pakket bestand jquery.ticker.js JQuery News Ticker. Je moet niets veranderen, gewoon een bestand naar de ticker initialiseren van de DOM Ready newsloader.js.

newsloader.js

 / / DOM klaar







 $ (Function () {



  



 / / Maak de ticker



  



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



    



 ajaxFeed: false, / / ​​geen voer



    



 htmlFeed: true, / / ​​html is



    



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



    



 DisplayType: 'fade', / / ​​Reveal of vervagen, vervagen kiezen



    



 richting: 'ltr', / / ​​richting ticker



    



 pauseOnItems: 5000, / / ​​de tijd nemen om het nieuws te lezen op de navigator!



    



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



    



 fadeOutSpeed: 300 / / fade-out speed



  



 });







 });

Het script doet is het maken van de ticker om de DOM Ready nuttige passeren opties, vooral in dit geval heb ik ervoor gekozen om de fade-effect te gebruiken en niet om de pure esthetische keuze te onthullen.
Let op: onthul de effect creëert "schriftelijk in progress ', dat zo veel typemachine doet.
Een andere belangrijke instelling pauseOnItems ik ingesteld op 5 seconden ingedrukt om de tijd voor de lezers om naar de bodem van het nieuws te geven.

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