{"id":923,"date":"2010-10-26T16:45:20","date_gmt":"2010-10-26T15:45:20","guid":{"rendered":"http:\/\/www.donatantonio.net\/blog\/?p=923"},"modified":"2010-10-26T16:49:05","modified_gmt":"2010-10-26T15:49:05","slug":"news-a-scorrimento-news-ticker","status":"publish","type":"post","link":"https:\/\/www.donatantonio.net\/blog\/guide_tutorial\/javascript\/news-a-scorrimento-news-ticker\/","title":{"rendered":"News a scorrimento (news ticker)"},"content":{"rendered":"

Dopo aver visto una finestra con news a comparsa<\/a>, implementeremo ora una barra orizzontale contenente news scorrevoli da destra verso sinistra (un cosiddetto news ticker<\/strong>) .
\nIn questo caso \u00e8 preferibile che il testo di ogni news sia composto esclusivamente dal titolo, il quale rimandi poi, tramite link, al testo completo.
\nIn fondo all\u2019articolo \u00e8 possibile provare e scaricare il codice completo<\/u>.<\/p>\n

Per realizzare il box e l’effetto desiderato utilizzeremo jQuery e il plugin denominato liScroll<\/a> che trasforma qualsiasi elenco in un news ticker<\/strong> a scorrimento.<\/p>\n

A tal proposito vediamo il codice html:<\/p>\n

\r\n<ul id="news">\r\n     <li><span>News 1<\/span>\r\n          <a href="#">Quel ramo del lago di Como ...<\/a>\r\n     <\/li>\r\n     <li><span>News 2<\/span>\r\n          <a href="#">Si racconta che il principe di ...<\/a>\r\n     <\/li>\r\n     <li><span>News 3<\/span>\r\n          <a href="#">Lucia entr\u00f2 nella stanza ...<\/a>\r\n     <\/li>\r\n     <li><span>News 4<\/span>\r\n          <a href="#">Il sole non era ancor tutto ...<\/a>\r\n     <\/li>\r\n     <li><span>News 5<\/span>\r\n          <a href="#">Da i Promessi Sposi ...<\/a>\r\n     <\/li>\r\n<\/ul>\r\n<\/pre>\n
Grazie alle potenzialit\u00e0 di questo plugin il codice html si riduce ad un semplice elenco non ordinato. La regola generale \u00e8 che: ogni voce dell’elenco \u00e8 una news<\/strong>.
\nPer far si che sia possibile animare il news ticker \u00e8 necessario assegnare un id all’elemento <ul>.
\nPrima di poter animare le news dobbiamo richiamare jQuery e il plugin. All’interno dell’head scriveremo:<\/p>\n
\r\n<script type='text\/javascript' src='jquery-1.4.3.min.js'><\/script>\r\n<script type='text\/javascript' src='jquery.li-scroller.1.0.js'><\/script>\r\n<\/pre>\n
Il codice Javascript per dare il via allo scorrere delle news \u00e8 il seguente (si ricorda che va definito dopo il codice html dell’elenco o richiamato al completo caricamento della pagina):<\/p>\n
\r\n<script type='text\/javascript'>\r\n     $("ul#news").liScroll({travelocity: 0.06});\r\n<\/script>\r\n<\/pre>\n
Il metodo da invocare sull’elenco \u00e8 liScroll<\/strong> a cui \u00e8 possibile passare come parametro un valore che esprima la velocit\u00e0 di scorrimento del testo.
\nIl codice completo fornisce infine un file css modificabile per ottenere lo stile desiderato.<\/p>\n
Cliccando qui<\/a><\/strong> \u00e8 possibile vedere in azione il codice.<\/p>\n
Cliccando qui<\/a><\/strong> \u00e8 possibile scaricare il codice.<\/p>\n
Sito ufficiale del plugin liScroll: http:\/\/www.gcmingati.net\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Dopo aver visto una finestra con news a comparsa, implementeremo ora una barra orizzontale contenente news scorrevoli da destra verso sinistra (un cosiddetto news ticker) .
\nIn questo caso \u00e8 preferibile che il testo di ogni news sia composto esclusivamente dal titolo, il quale rimandi poi, tramite link, al testo completo.
\nIn fondo all\u2019articolo \u00e8 possibile provare e scaricare il codice completo.<\/p>\n
Per realizzare il box e l’effetto desiderato utilizzeremo jQuery e il plugin denominato liScroll che trasforma qualsiasi elenco in un news ticker a scorrimento.<\/p>\n
A tal proposito vediamo il codice html:<\/p>\n
<ul id="news">
\n     <li><span>News 1<\/span>
\n          <a href="#">Quel ramo del lago di Como …<\/a>
\n     <\/li>
\n     <li><span>News 2<\/span>
\n          <a href="#">Si racconta che il principe di …<\/a>
\n     <\/li>
\n     <li><span>News 3<\/span>
\n          <a href="#">Lucia entr\u00f2 nella stanza …<\/a>
\n     <\/li>
\n     <li><span>News 4<\/span>
\n          <a href="#">Il sole non era ancor tutto …<\/a>
\n     <\/li>
\n     <li><span>News 5<\/span>
\n          <a href="#">Da i Promessi Sposi …<\/a>
\n     <\/li>
\n<\/ul><\/p>\n
Grazie alle potenzialit\u00e0 di questo plugin il codice html si riduce ad un semplice elenco non ordinato. La regola generale \u00e8 che: ogni voce dell’elenco \u00e8 una news.
\nPer far si che sia possibile animare il news ticker \u00e8 necessario assegnare un id all’elemento <ul>.
\nPrima di poter animare le news dobbiamo richiamare jQuery e il plugin. All’interno dell’head scriveremo:<\/p>\n
<script type=’text\/javascript’ src=’jquery-1.4.3.min.js’><\/script>
\n<script type=’text\/javascript’ src=’jquery.li-scroller.1.0.js’><\/script><\/p>\n
Il codice Javascript per dare il via allo scorrere delle news \u00e8 il seguente (si ricorda che va definito dopo il codice html dell’elenco o richiamato al completo caricamento della pagina):<\/p>\n
<script type=’text\/javascript’>
\n     $("ul#news").liScroll({travelocity: 0.06});
\n<\/script><\/p>\n
Il metodo da invocare sull’elenco \u00e8 liScroll a cui \u00e8 possibile passare come parametro un valore che esprima la velocit\u00e0 di scorrimento del testo.
\nIl codice completo fornisce infine un file css modificabile per ottenere lo stile desiderato.<\/p>\n
Cliccando qui \u00e8 possibile vedere in azione il codice.<\/p>\n
Cliccando qui \u00e8 possibile scaricare il codice.<\/p>\n
Sito ufficiale del plugin liScroll: http:\/\/www.gcmingati.net\/<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[20],"tags":[207,206,208,205],"_links":{"self":[{"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/posts\/923"}],"collection":[{"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/comments?post=923"}],"version-history":[{"count":0,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/posts\/923\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/media?parent=923"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/categories?post=923"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/tags?post=923"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}