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">
$(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
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>
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.
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...
-
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
