<code>// Crea una función anónima autoejecutable. Así,
// somos libres de usar el símbolo de dólar de jQuery en cualquier parte.
(function($) {
// Llamamos a nuestro plugin "newscroll". Al crear nuestra función,
// permitiremos que el usuario pase un par de parámetros.
$.fn.newsScroll = function(options) {
// Para cada elemento en el conjunto envuelto, realizamos lo siguiente.
return this.each(function() {
var
// Almacena esto - o el/los widget(s) ul que se pasó.
// Ahorra tiempo y mejora el rendimiento.
$this = $(this),
// Si el usuario no pasa parámetros, usaremos este objeto.
defaults = {
speed: 400, // ¿Qué tan rápido deben desplazarse los elementos?
delay: 3000, // ¿Cuánto dura el descanso entre transiciones?
list_item_height: $this.children('li').outerHeight() // ¿Qué tan alto es cada elemento de la lista? Si este parámetro no se pasa, jQuery lo capturará.
},
// Crea un nuevo objeto que combina los valores por defecto y
// los "options" del usuario. Estos últimos tienen prioridad.
settings = $.extend({}, defaults, options);
// Esto establece un intervalo que será llamado continuamente.
setInterval(function() {
// Obtén el primer elemento de la lista en el conjunto envuelto.
$this.children('li:first')
// Anímalo
.animate({
marginTop : '-' + settings.list_item_height, // Desplaza este primer elemento hacia arriba.
opacity: 'hide' }, // Desvanece el li.
// Durante el tiempo que se pase
// (settings.speed)
settings.speed,
// Al completar, ejecuta una función de callback.
function() {
// Obtén nuevamente ese primer elemento de la lista.
$this.children('li:first')
.appendTo($this) // Mueve a la parte inferior del ul.
// Restablece su margen superior a 0. De lo contrario,
// aún contendrá el valor negativo que configuramos anteriormente.
.css('marginTop', 0)
.fadeIn(300); // Vuelve a desvanecerse.
}
); // fin de animate
}, settings.delay); // fin de setInterval
});
}
})(jQuery);
<code>
Para Java Script
y html :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="****El nombre del Java Precedentes****"></script>
<script type="text/javascript">
$('#widget').newsScroll({
speed: 2000,
delay: 5000
});
// o simplemente llámalo así:
// $('#widget').newsScroll();
</script>
<div id="titre id ">
<h2>título</h2><ul id="widget3">
<li>
<table width="226px">
<tr>
<td>
<a href="tu pagina en .htmll" class="blue"><img src="una pequeña imagen logo etc..." title="tu título" alt="título al pasar el ratón"/></a> </td>
<td>
<div align="center"><h3 class="blue">Tu título</h3><br />
<a href="tu pagina en .html" class="La clase CSS utilizada"><b>Un París-Niza 2010 Ã olvidar</b><br />el 14/03/2010</a> </div>
</td>
</tr>
</table>
</li>
<script type="text/javascript">
$('#widget2').newsScroll({
speed: 3000,
delay: 10000
});
// o simplemente llámalo así:
// $('#widget').newsScroll();
</script> </div></div>
</div>
