Para eso sirve liScroll, un plugin basado en jQuery con el cual podremos trasformar una lista de elementos desordenados en un “desplazador” horizontal, para noticias, eventos, noticias destacadas o lo que queramos. Aquí tenéis una demo. Vamos a ver como implementarlo.
Lo primero es descargar el script y jquery (usar botón derecho>guardar enlace como en ambos casos) y crear un .html, guardarlo con el nombre que prefiráis. Seguido incluimos las dos librerías entre las etiquetas head /head:
<script type="text/javascript" src="jquery.li-scroller.1.0.js"></script>
Creamos la estructura para llamar al script, también entre head /head:
$(function(){
$("ul#ticker01").liScroll();
});
</script>
Y los estilos que nos proporcionan (para cambiar el aspecto esto será lo que modificaremos)
/* liScroll style declarations */
.tickercontainer { /* the outer div with the black border */
border: 1px solid #000;
background: #fff;
width: 738px;
height: 27px;
margin: 0 auto;
padding: 0
overflow: hidden;
}
.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
position: relative;
left: 10px;
top: 8px;
width: 718px;
overflow: hidden;
}
ul.newsticker { /* that's your list */
position: relative;
left: 750px;
font: bold 10px Verdana;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.newsticker li {
float: left; /* important: display inline gives incorrect results when you check for elem's width */
margin: 0;
padding: 0;
background: #fff;
}
ul.newsticker a {
white-space: nowrap;
padding: 0;
color: #ff0000;
font: bold 10px Verdana;
margin: 0 50px 0 0;
}
ul.newsticker span {
margin: 0 10px 0 0;
}
</style>
Finalmente creamos la estructura html entre body /body:
<li><span>10/10/2007</span><a href="#/ogt/content/news/News183.complete">The first thing that most Javascript programmers</a></li>
<li><span>10/10/2007</span><a href="#/ogt/content/news/News175.complete">End up doing is adding some code</a></li>
<li><span>10/10/2007</span><a href="#/ogt/content/news/News177.complete">The code that you want to run</a></li>
<li><span>08/10/2007</span><a href="#/ogt/content/news/News176.complete">Inside of which is the code that you want to run</a></li>
<li><span>08/10/2007</span><a href="#/ogt/content/news/News178.complete">Right when the page is loaded</a></li>
</ul>
Si queremos aumentar o disminuir la velocidad en la que se muestran los elementos, añadiremos la función “travelocity”, quedando de esta manera:
$("ul#ticker01").liScroll({travelocity: 0.15});
});
Enlace liScroll (a jQuery News Ticker made easy) 1.0
Escrito por redactor invitado: Elías Notario
Blog: diarioTHC
Loading ...
iScroll - Mostrar mensajes horizontales con jQuery — Freak Group
04-01-2008
Permalink
[...] @ Xyberneticos « Lunapic - Editor de imágenes [...]
links for 2008-01-22 en newdisco
04-01-2008
Permalink
[...] liScroll, muestra mensajes horizontales en movimiento « Xyberneticos Script para mostrar listas en forma de un scroll horizontal automatico. (tags: javscript howto scroll list ajax webdev) Archivado en: Links Diarios | Etiquetas: No Tags. Search [...]