bueno hice un ejemplo de cada uno
desde el html directo
Código HTML:
<html>
<head>
<title>Ejemplo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$( function (){
//Busco los ultimos 3 div y los oculto
$('#resultados>div:gt(2)').hide();
function actualizar (){
//Busco el ULTIMO div hijo directo de resultados y lo escondo
$('#resultados>div:visible:last').slideUp(300);
//Busco el ultimo div hijo directo de resultados y lo agrego al principio, luego lo muestro
$('#resultados>div:hidden:last').prependTo('#resultados').slideDown(600);
}
//Ejecuto la funcion actualizar cada 2 segundos
setInterval(actualizar, 2000);
});
</script>
<style>
#resultados {width:300px; font-size:12px; font-family:arial}
.noticias{height:130px}
.titulo{font-size:14px; font-weight:600}
</style>
</head>
<body>
<div id="resultados">
<div class='noticias'><div class='titulo'>1. Blackberry 9700 llega este mes a la Argentina</div><div class='resumen'>01-01-2010 - La compaña canadiense RIM, confirmó que el modelo 9700, sucesor del Blackberry Bold 9000, llegará a la Argentina en las primeras semanas de este mes. Quizás uno de los cambios más transcendentales de este nuevo modelo, es la eliminación de la clásica...</div></div>
<div class='noticias'><div class='titulo'>2. Todos contra el iPad</div><div class='resumen'>01-01-2010 - La firma Fujitsu analiza iniciar acciones legales contra Apple por el uso del nombre. Mientras tanto, una empresa china asegura que la tablet es una copia. Desde su presentación la semana pasada, el iPad de Apple desató una ola de comentarios a favor y...</div></div>
<div class='noticias'><div class='titulo'>3. Apple le marca la cancha a Google</div><div class='resumen'>01-01-2010 - Además del magnetismo que genera cada uno de sus anuncios, el mundo de Apple siempre gira en torno al misterio ya la falta de información oficial. Esto genera que existan todo tipo de rumores y declaraciones polémicas en torno a la compaña de la...</div></div>
<div class='noticias'><div class='titulo'>4. Firefox ya está disponible para Maemo de Nokia</div><div class='resumen'>01-01-2010 - Firefox para móviles ya puede usarse en la plataforma Maemo de Nokia. Así lo ha anunciado hoy la Fundación Mozilla, que ha optimizado su navegador en movilidad para que los poseedores de un Nokia N900 puedan acceder a Internet a través de...</div></div>
<div class='noticias'><div class='titulo'>5. Del papel al iPad</div><div class='resumen'>01-01-2010 - Dos bombas seguidas. Una. Apple presenta su iPad, un todo en uno que cambiará nuestro entretenimiento. Dos. El escritor Ian McEwan firma un acuerdo con Amazon por el que dobla sus derechos de autor. Los contenidos tradicionales tiemblan: el futuro es...</div></div>
<div class='noticias'><div class='titulo'>6. Debutó en Argentina la nueva familia de procesadores Intel Core 2010</div><div class='resumen'>01-01-2010 - Diseñados tanto para PCs de escritorio y móviles, y ofrecen un desempeño inteligente para reproducir música, videos, películas y utilizar juegos. Los primeros equipos pueden conseguirse en Garbarino y Compumundo. El coloso informático Intel anunció que...</div></div>
</div>
</body>
</html>
y este con json, suponemos que el json se creó con php y que genera lo siguiente
Código HTML:
{
"noticias": [
{"titulo":"1. Blackberry 9700 llega este mes a la Argentina", "resumen":"La compaña canadiense RIM, confirmó que el modelo 9700, sucesor del Blackberry Bold 9000, llegará a la Argentina en las primeras semanas de este mes. Quizás uno de los cambios más transcendentales de este nuevo modelo, es la eliminación de la clásica...", "fecha":"01-01-2010", "url":"http://news.google.com.ar/news/url?sa=t&ct2=es_ar%2F0_0_s_1_0_t&usg=AFQjCNEH6ir-KCYMH-bAbmIT-ZNjdpWBSw&cid=8797375699050&ei=iWRnS8DSI4Gk8wT7trbBAw&rt=SECTION&vm=STANDARD&url=http%3A%2F%2Fblogs.perfil.com%2Fconexion%2F%3Fp%3D1743"},
{"titulo":"2. Todos contra el iPad", "resumen":"La firma Fujitsu analiza iniciar acciones legales contra Apple por el uso del nombre. Mientras tanto, una empresa china asegura que la tablet es una copia. Desde su presentación la semana pasada, el iPad de Apple desató una ola de comentarios a favor y...", "fecha":"01-01-2010", "url":"http://news.google.com.ar/news/url?sa=t&ct2=es_ar%2F0_0_s_2_0_t&usg=AFQjCNGDGuAhTODGfsU-hezv5xU-DChZcQ&cid=8797375696209&ei=iWRnS8DSI4Gk8wT7trbBAw&rt=SECTION&vm=STANDARD&url=http%3A%2F%2Fwww.lavoz.com.ar%2F10%2F02%2F01%2Fsecciones%2Fciudadanos%2Fnota.asp%3Fnota_id%3D587690"},
{"titulo":"3. Apple le marca la cancha a Google", "resumen":"Además del magnetismo que genera cada uno de sus anuncios, el mundo de Apple siempre gira en torno al misterio ya la falta de información oficial. Esto genera que existan todo tipo de rumores y declaraciones polémicas en torno a la compaña de la...", "fecha":"01-01-2010", "url":"http://news.google.com.ar/news/url?sa=t&ct2=es_ar%2F0_0_s_3_0_t&usg=AFQjCNFC0h2W9F5jpV5pE4IFLoKBDXImxA&cid=8797375702670&ei=iWRnS8DSI4Gk8wT7trbBAw&rt=SECTION&vm=STANDARD&url=http%3A%2F%2Fwww.lanacion.com.ar%2Fnota.asp%3Fnota_id%3D1228389"},
{"titulo":"4. Firefox ya está disponible para Maemo de Nokia", "resumen":"Firefox para móviles ya puede usarse en la plataforma Maemo de Nokia. Así lo ha anunciado hoy la Fundación Mozilla, que ha optimizado su navegador en movilidad para que los poseedores de un Nokia N900 puedan acceder a Internet a través de...", "fecha":"01-01-2010", "url":"http://news.google.com.ar/news/url?sa=t&ct2=es_ar%2F0_0_s_5_0_t&usg=AFQjCNEr8yEwGNsRx5m2RQH6qM4tP77tSA&cid=8797375662007&ei=iWRnS8DSI4Gk8wT7trbBAw&rt=SECTION&vm=STANDARD&url=http%3A%2F%2Fwww.itespresso.es%2Fes%2Fnews%2F2010%2F02%2F01%2Fmaemo-firefox"},
{"titulo":"5. Del papel al iPad", "resumen":"Dos bombas seguidas. Una. Apple presenta su iPad, un todo en uno que cambiará nuestro entretenimiento. Dos. El escritor Ian McEwan firma un acuerdo con Amazon por el que dobla sus derechos de autor. Los contenidos tradicionales tiemblan: el futuro es...", "fecha":"01-01-2010", "url":"http://news.google.com.ar/news/url?sa=t&ct2=es_ar%2F0_0_s_6_0_t&usg=AFQjCNFrbX198du6JO9rko_EQ3Miuta9lg&cid=8797375658330&ei=iWRnS8DSI4Gk8wT7trbBAw&rt=SECTION&vm=STANDARD&url=http%3A%2F%2Fwww.abc.es%2F20100131%2Fmedios-redes-web%2Fpapel-ipad-201001310843.html"},
{"titulo":"6. Debutó en Argentina la nueva familia de procesadores Intel Core 2010", "resumen":"Diseñados tanto para PCs de escritorio y móviles, y ofrecen un desempeño inteligente para reproducir música, videos, películas y utilizar juegos. Los primeros equipos pueden conseguirse en Garbarino y Compumundo. El coloso informático Intel anunció que...", "fecha":"01-01-2010", "url":"http://news.google.com.ar/news/url?sa=t&ct2=es_ar%2F0_0_s_7_0_t&usg=AFQjCNGfN7UHCxgeOPJvRgLjAduJMEG2mw&cid=8797375700985&ei=iWRnS8DSI4Gk8wT7trbBAw&rt=SECTION&vm=STANDARD&url=http%3A%2F%2Fwww.canal-ar.com.ar%2Fnoticias%2Fnoticiamuestra.asp%3FId%3D8486"},
]
}
y este el html con el código que lo lee
Código HTML:
<html>
<head>
<title>Ejemplo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$( function (){
//Leo el archivo json.tx
$.getJSON('json.txt', function(data) {
//Recorro las noticias y obtengo los valores
jQuery.each(data.noticias, function (i, val){
titulo = val.titulo;
resumen = val.resumen;
fecha = val.fecha;
url = val.url;
//Agrego al div #resultados el cuerpo de cada noticia concatenando con las variables donde almacené los valores, seguido busco los últimos 3 div hijos y los oculto
$('#resultados').append("<div class='noticias'><div class='titulo'>"+titulo+"</div><div class='resumen'>"+fecha+" - "+resumen+"</div></div>").find('>div:gt(2)').hide();
});
});
function actualizar (){
//Busco el ULTIMO div hijo de resultados y lo escondo
$('#resultados>div:visible:last').slideUp(300);
//Busco el ultimo div hijo de resultados y lo agrego al principio, luego lo muestro
$('#resultados>div:hidden:last').prependTo('#resultados').slideDown(600);
}
//Ejecuto la funcion actualizar cada 2 segundos
setInterval(actualizar, 2000);
});
</script>
<style>
#resultados {width:300px; font-size:12px; font-family:arial}
.noticias{height:130px}
.titulo{font-size:14px; font-weight:600}
</style>
</head>
<body>
<div id="resultados"></div>
</body>
</html> Es solo buscar la última noticia oculta, agregarlo al principio y colocarla visible, luego buscar la última noticia visible y ocultarla