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.