jQuery News Ticker è un plugin per jQuery che consente di inserire sul proprio sito un news ticker elegante, flessibile e facile da usare. Prendendo ispirazione dal News Ticker presente sul sito BBC, jQuery News Ticker implementa un leggero visualizzatore di news compatibile con IE6 +, FF 3.6 +, Chrome, Safari, Safari Mobile e Opera. E’ possibile utilizzare come sorgente dele news sia codice HTML che URL di feeds.
Anteprima
Codice da aggiungere all'interno del tag <HEAD>
1 2 |
<link href="css/ticker-style.css" rel="stylesheet" type="text/css" /> <script src="jquery.ticker.js" type="text/javascript"></script> |
Funzione e opzioni impostabili con jQuery News Ticker
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(function () { $('#js-news').ticker( speed: 0.10, // The speed of the reveal ajaxFeed: false, // Populate jQuery News Ticker via a feed feedUrl: false, // The URL of the feed // MUST BE ON THE SAME DOMAIN AS THE TICKER feedType: 'xml', // Currently only XML htmlFeed: true, // Populate jQuery News Ticker via HTML debugMode: true, // Show some helpful errors in the console or as alerts // SHOULD BE SET TO FALSE FOR PRODUCTION SITES! controls: true, // Whether or not to show the jQuery News Ticker controls titleText: 'Latest', // To remove the title set this to an empty String displayType: 'reveal', // Animation type - current options are 'reveal' or 'fade' direction: 'ltr' // Ticker direction - current options are 'ltr' or 'rtl' pauseOnItems: 2000, // The pause on a news item before being replaced fadeInSpeed: 600, // Speed of fade in animation fadeOutSpeed: 300 // Speed of fade out animation ); }); |
Esempio di codice HTML da implementare.
1 2 3 4 5 6 |
<ul id="js-news" class="js-hidden"> <li class="news-item"><a href="#">This is the 1st latest news item.</a></li> <li class="news-item"><a href="#">This is the 2nd latest news item.</a></li> <li class="news-item"><a href="#">This is the 3rd latest news item.</a></li> <li class="news-item"><a href="#">This is the 4th latest news item.</a></li> </ul> |
Demo Download Info | Sito Web | Autore