En Woork publican Fantastic News Ticker que se trata de un excelente recurso que nos permitirá implementar un ticker de notcias con Mootools.
Es muy elegante y el funcionamiento del ejemplo es basado en el de Newsvine, este está disponible para descargar.
También es muy fácil de implementar, sólo son necesarios 4 pasos:
Contenido
Paso 1 – Estructura del HTML
Cada noticia está contenida en un <li> y la lista <ul>es contenido dentro de la capa (layer) #NewsVertical con la propiedad overflow puesta a hidden (oculta) y la position en relative (relativa).
Paso 2 – El código HTML
Enlazar el archivo Javascript de Mootools:
<script language=“javascript” src=“mootools/mootools.svn.js” type=“text/javascript”></script>
Luego, agregar el siguiente código al <body>:
<div id=“NewsTicker”>
<h1>What’s news?</h1>
<div id=“NewsVertical”>
<ul id=“TickerVertical”>
<!– Each News into a LI element
Use PHP or another language
to get dinamically your news. –>
<li>
<img src=“img/img1.png” border=“0” class=“NewsImg”/>
<span class=“NewsTitle”>
<a href=“link.html”>News Title</a>
</span>
Some text here, it’s your news summary…
<span class=“NewsFooter”><strong>Published July 25</strong> – 324 comments</span>
</li>
<!– If you can’t use a server side
language to get your news add
manually your news into LI element
–>
</ul>
</div>
</div>
<h1>What’s news?</h1>
<div id=“NewsVertical”>
<ul id=“TickerVertical”>
<!– Each News into a LI element
Use PHP or another language
to get dinamically your news. –>
<li>
<img src=“img/img1.png” border=“0” class=“NewsImg”/>
<span class=“NewsTitle”>
<a href=“link.html”>News Title</a>
</span>
Some text here, it’s your news summary…
<span class=“NewsFooter”><strong>Published July 25</strong> – 324 comments</span>
</li>
<!– If you can’t use a server side
language to get your news add
manually your news into LI element
–>
</ul>
</div>
</div>
En este ejemplo es una página estática, lo interesante obviamente es hacerlo dinámico, por lo que conocimientos de algún lenguaje como PHP son necesarios.
Paso 3 – El código CSS
El siguiente es el código de la CSS usado en este ejemplo.
#NewsTicker{
border:solid 1px #cccccc;
background:#eaf5e0;
width:300px;
height:344px;
}
#NewsTicker h1{
padding:6px; margin:0; border:0;
background:#dfe9d5;
color:#000000;
font-size:11px;
font-weight:bold;
}
#NewsVertical {
width:300px;
height:300px;
display:block;
overflow:hidden;
position:relative;
}
/* ————— */
/* Ticker Vertical */
#TickerVertical {
width:300px;
height:300px;
display:block;
list-style:none;
margin:0;
padding:0;
}
#TickerVertical li {
display:block;
width:288px;
color:#333333;
text-align:left;
font-size:11px;
margin:0;
padding:6px;
float:left;
}
#TickerVertical li .NewsTitle{
display:block;
color:#000000;
font-size:12px;
font-weight:bold;
margin-bottom:6px;
}
#TickerVertical li .NewsTitle a:link,
#TickerVertical li .NewsTitle a:Visited {
display:block;
color:#000000;
font-size:12px;
font-weight:bold;
margin-bottom:6px;
text-decoration:none;
}
#TickerVertical li .NewsTitle a:hover {
text-decoration:underline;
}
#TickerVertical li .NewsImg{
float:left;
margin-right:10px;
}
#TickerVertical li .NewsFooter{
display:block;
color:#000000;
font-size:10px;
margin:6px 0 14px 0;
}
border:solid 1px #cccccc;
background:#eaf5e0;
width:300px;
height:344px;
}
#NewsTicker h1{
padding:6px; margin:0; border:0;
background:#dfe9d5;
color:#000000;
font-size:11px;
font-weight:bold;
}
#NewsVertical {
width:300px;
height:300px;
display:block;
overflow:hidden;
position:relative;
}
/* ————— */
/* Ticker Vertical */
#TickerVertical {
width:300px;
height:300px;
display:block;
list-style:none;
margin:0;
padding:0;
}
#TickerVertical li {
display:block;
width:288px;
color:#333333;
text-align:left;
font-size:11px;
margin:0;
padding:6px;
float:left;
}
#TickerVertical li .NewsTitle{
display:block;
color:#000000;
font-size:12px;
font-weight:bold;
margin-bottom:6px;
}
#TickerVertical li .NewsTitle a:link,
#TickerVertical li .NewsTitle a:Visited {
display:block;
color:#000000;
font-size:12px;
font-weight:bold;
margin-bottom:6px;
text-decoration:none;
}
#TickerVertical li .NewsTitle a:hover {
text-decoration:underline;
}
#TickerVertical li .NewsImg{
float:left;
margin-right:10px;
}
#TickerVertical li .NewsFooter{
display:block;
color:#000000;
font-size:10px;
margin:6px 0 14px 0;
}
Paso 4 – La función Javascript que habilita el desplazamiento (scroller) vertical
Esta es provista por Capitol Media y debe se descargada. Descargar Javascript Scrollerownloading.
Sitio: Woork (en inglés)
Descargar ejemplo/ver demo de Fantastic News Ticker visita Woork
Suscribirse para recibir las últimas actualizaciones de Pixelco.
