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.
Jueves, 4 de Junio de 2009 a las 13.49
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
Jueves, 17 de Junio de 2010 a las 01.21
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!
Lunes, 5 de Julio de 2010 a las 12.40
en lugar de horizontal pone UP o DOWN segun quieras
Miércoles, 4 de Mayo de 2011 a las 14.52
quisiera que me enviaran el codigo para descargarlo que el link que esta aca esta roto. quisiera verlo para entenderlo mejor. muchisimas gracias fransheska