"TINKERMASTER " diseños para Photoshop

tinkermaster

Crear un cuadro de noticias con jQuery

Creando un cuadro de noticias con jQuery 1.2.6


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:

  • DISEÑOS CSS

    descarga los mejores diseños Css para que puedas personalizar tu web...

  • PLANTILLAS XML

    Descarga exelentes plantillas para que personalizes tu blog...

  • JUEGOS PARA PC

    Descarga exelentes juegos para tu PC...

  • AFILIADOS VIP

    Afiliate a mi web de una manera facil y sencilla...

  • WALLPAPERS

    descarga wallpapers para que le den una mejor apariencia a tu PC...


 

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 vamos a pasar con el segundo paso que es darle el diseño css, aqui usaremos la posicion fixed y lo alinearemos en la parte lateral derecha justo como se muestra a continuacion. 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>


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... bueno si tienen alguna duda o comentario haganmelo saber.

Hoy habia 9 visitantes (25 clics a subpáginas) ¡Aqui en esta página!

    • CUADRO TWEETS

      Para todos los usuarios de twitter que tienen una web es< esencial mantener informados a nuestros usuarios de las actualizaciones...

    • CUADRO DE NOTICIAS EN JQUERY

      crear un cuadro de noticias utilizando jquery para la animacion...

    • ESTILOS DE BORDES

      los bordes en realidad sirven para que algun elemento se vea mejor, es decir elegante...

    • RECURSOS

      encuentra exelentes paginas webs donde encontraras brushes, tipos de textos, etc...

  • SIGUEME EN YOUTUBE

    • DISEÑOS CSS

      descarga los mejores diseños Css para que puedas personalizar tu web...

    • PLANTILLAS XML

      Descarga exelentes plantillas para que personalizes tu blog...

    • JUEGOS PARA PC

      Descarga exelentes juegos para tu PC...

    • AFILIADOS VIP

      Afiliate a mi web de una manera facil y sencilla...

    • WALLPAPERS

      descarga wallpapers para que le den una mejor apariencia a tu PC...






    • Bienvenidos a Tinkermaster website en donde se comparten conocimientos, ideas e informaciones listas para que cualquiera pueda aprender de ellas - Diseñado Por Tinkermaster
      Estas viendo la imagen:


  • Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?
    Registrarse gratis