Micaela 13 de octubre de 2008 a las 09.30
   Imprimir artículo
elWebmaster.com

Script para realizar marquesinas con noticias rotativas


Desde el sitio de Internet The Daily Inspired nos traen un interesante efecto para añadir a nuestras páginas que nos permitirá crear una especie de marquesina con noticias que irán cambiando rotativamente.

Consiste en un script de Javascript listo para usar que puede ser añadido fácil y rápidamente en nuestros proyectos web.

EL script posee un ID controller que incluye un botón de play/stop para parar o hacer rotar las noticias en forma vertical.

El HTML debe lucir así:

<div id="controller">
<div id="stop_scroll_cont">
<a id="stop_scroll"><img src="pic/stop.png" width="14" height="14" border="0" align="absmiddle" /></a> Stop news scroll
</div>

<div id="play_scroll_cont">
<a id="stop_scroll"><img src="pic/play.png" width="14" height="14" border="0" align="absmiddle" /></a> Play news scroll
</div>scroll</div>

Y al CSS hay que añadirle la siguiente línea:

#play_scroll_cont{display:none;}

Para permitir la función javascript que hace posible el scroll vertical y la función stop/play es necesario añadir al layer #newsTicker el siguiente código:

<script language="javascript" type="text/javascript" src="newsticker.js"></script>

Finalmente en newsticker.js hace falta agregar lo siguiente:

window.addEvent('domready', function() {
var hor = new Ticker('TickerVertical', {

speed : 500, delay : 5000, direction : ‘vertical’});
$(‘stop_scroll’).addEvent(‘click’, function() {
$(‘play_scroll_cont’).style.display=’block’;
$(‘stop_scroll_cont’).style.display=’none’;
hor.pause();
});
$(‘play_scroll’).addEvent(‘click’, function() {
$(‘stop_scroll_cont’).style.display=’block’;
$(‘play_scroll_cont’).style.display=’none’;
hor.resume();
});
});

Haz clic aquí para descargarlo.


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (5)

  1. Enzo dice:

    Esta muy bueno, lástima que en Firefox, cuando agrego un flash, no lo oculta en el scroll y se ve fuera del Layer antes y despuès. En IE funciona correctamente.

    Busque como solucionarlo y no pude

    saludos
    Enzo

  2. Matias dice:

    Hola, quisiera saber como lograr que las noticias pasen de manera horizontal.
    Cambié una parte del codigo:
    speed : 500, delay : 5000, direction : ‘horizontal’
    pero sigue pasandolo verticalmente, y luego de un tiempo los comienza a pasar de forma horizontal.
    Espero puedas ayudarme
    Saludos!

  3. emi dice:

    en lugar de horizontal pone UP o DOWN segun quieras

  4. fransheska dice:

    quisiera que me enviaran el codigo para descargarlo que el link que esta aca esta roto. quisiera verlo para entenderlo mejor. muchisimas gracias fransheska

  5. Karel dice:

    El link de descarga no funciona :( por favor avisarme cuando lo vuelva a subir. Gracias.

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder