noticias
Lo primero que vamos a hacer es como siempre pegar la libreria que nos da el efecto y el script del mismo para que el efecto, la velocidad queden medidos. En este caso utilizaremos la libreria 1.2.6 yo la he subido a mi googlecode, bueno he aqui la libreria y el script. Recuerden que esto es una libreria .js y un script lo deven pegan antes de </head> de su diseño css
<script type="text/javascript">
$(document).ready(function(){
var first = 0;
var speed = 700;
var pause = 3500;
function removeFirst(){
first = $('ul#cuadronot li:first').html();
$('ul#cuadronot li:first')
.animate({opacity: 0}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);
}
function addLast(first){
last = '<li style="display:none">'+first+'</li>';
$('ul#cuadronot').append(last)
$('ul#cuadronot li:last')
.animate({opacity: 1}, speed)
.fadeIn('slow')
}
interval = setInterval(removeFirst, pause);
});
</script>
Ya instalada la libreria y el script pasaremos al segundo paso que es darle diseño y forma a nuestro cuadro de noticias. aqui le daremos ancho y alto tambien le pondremos los valores de las imagenes, los bordes y los espacios.Recuerden que esto es un codigo css y lo deven pegar en CSS-CODE
height:200px;
width:238px;
overflow:hidden;
border:solid 1px #DEDEDE;
padding:6px 10px 14px 10px;
background-color:#fff;
}
#cuadronot li{
border:0; margin:0; padding:0; list-style:none;
}
#cuadronot li{
height:60px;
padding:5px;
list-style:none;
}
#cuadronot a{
color:#000000;
margin-bottom:
}
#cuadronot .news-title{
display:block;
font-weight:bold;
margin-bottom:0px;
font-size:11px;
}
#cuadronot .news-text{
display:block;
font-size:11px;
color:#666666;
}
#cuadronot img{
float:left;
width:50px;
height:50px;
margin-right:14px;
padding:4px;
border:solid 1px #DEDEDE;
}
#cuadronot p {
font-size: 10px;
line-height: 1.1;
}
.context{
background-color:#ccc;
width:260px;
padding: 5px;
}
Ya puesto el diseño css por fin pasaremos al utimo paso que como todos sabran es representar y mostrar el cuadro de noticias mediante HTML, tambien aqui incluiremos la imagen de titulo de noticias. Recuerden que esto es un codigo HTML y lo deven pegar en donde quieran que este el cuadro de noticias.
<ul id="cuadronot">
<li><img alt="" src="URL IMG PRIMERA NOTICIA" />
<a class="news-title" href="url">Titulo primera noticia</a>
<p>Texto de la primera noticia</p>
</li>
<li><img alt="" src="URL IMG SEGUNDA NOTICIA" />
<a class="news-title" href="url">Titulo segunda noticia</a>
<p>Texto de la segunda noticia</p>
</li>
<li><img alt="" src="URL IMG TERCERA NOTICIA" />
<a class="news-title" href="url">Titulo tercera noticia</a>
<p>Texto de la tercera noticia</p>
</li>
<li><img alt="" src="URL IMG CUARTA NOTICIA" />
<a class="news-title" href="url">Titulo cuarta noticia</a>
<p>Texto de la cuarta noticia</p>
</li>
</ul>
</div>
Y bueno con esto hemos acabado de crear nuestro cuadro de noticias muy elegante y con un efecto muy vistoso con la libreria jQuery 1.2.6, tambien cabe destacar la utilidad de este cuadro, Y bueno, alguna duda o comentario haganmelo saber