Souldhack
Souldhack necesita de nuestra ayuda! Por favor lee la siguiente nota! Necesitamos tu ayuda! Y apoyanos!

souldhack

Cuadro noticias con jQuery

Creando un cuadro de noticias con jQuery 1.2.6

Escrito por Administrador - 9/noviembre/2011


Empezemos... vamos a crear un cuadro de noticias utilizando jquery para la animacion, en si la idea es que cada noticia se valla desvaneciendo mientras la otra noticia aparece en su lugar, le vamos a poner una imagen como titulo y un borde para que resulte elegante... el cuadro mas o menos luce asi:


  • Estrenando nuevo logo

    Hace poco me dia a la tarea de innovar un poco el logo y de hay surgio una idea...

  • Apoyemos a Souldhack!

    Ya casi llegamos a los 40 fans, esperemos sigan apoyandonos dandole me gusta a la pagina de Souldhack en Facebook

  • Una posible actualizacion

    Hace poco me surgio una idea, que consiste en que la gente que quiera puede mandar sus articulos y seran publicados en Souldhack.

  • Actualizamos el header

    Como muchos se han dado cuenta remodelamos un poco el header con una mejor vista del menu.


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" src="http://souldhack.googlecode.com/files/jquery-1.2.6.min.js"></script>

<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

#cuadronot{
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.

<div class="context"><img alt="" style="width: 259px;" src="URL DE LA IMAGEN DEL ENCABEZADO 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





Acerca del autor
Manolo M./Administrador
Les cuento un poco sobre mi... soy un aficionado en todo lo relacionado con las paginas web, haora estoy enamorado de mi pagina web en la cual se comparten conocimientos, ideas... Leer mas

 


Algunas categorias
Interesante
Aqui hablaremos de articulos de interes y debate.

Interesante

Recursos
En esta categoria encontraras, recursos utiles para tener un buen desempeño web.

Recursos


 
Site5.com

Souldhack necesita tu ayuda!

Souldhack necesita nuestra ayuda!
Todos podemos ayudar a souldhack entrando al blog Souldhacko Y dandole click a la publicidad y anuncios de google que estan en dicho blog, de esta manera estaremos apoyando y agradeciendo a souldhack por toda su ayuda brindada hacia nosotros!, espero y todos nos apoyen, no saben lo agradecidos que estaremos con todos ustedes!, Recuerden que souldhack! esta echo por y para ustedes!.

¿Que pasa en souldhack y souldhacko?

Recuerda que se están escribiendo artículos recientemente en el blog, Souldhacko


Siguenos en Facebook!

Recent Posts

Cuadro ultimos tweets
Para todos los usuarios de twitter que tienes una web acargo en esencial...

Abril 14, 2012

 
Botones compartir articulos
Cuando un articulo es satisfactorio, o simplemente era lo que estabamos...

Febrero 18, 2012

 
Usar/Utilizar jQuery
Bueno en este tutorial explico como instalar y usar jquery ya sea en un diseño profecional...

Noviembre 13, 2011

 
Cambiar botones a Ice Blue
En este mi mas reciente video subido explico como cambiar los botones de los diseños...

Mayo 3, 2012

 

Chat

Los comentarios...

Los comentarios...

Mi video mas reciente

=> ¿Desea una página web gratis? Pues, haz clic aquí! <=