Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje12-09-2011, 18:13 (UTC)    
Título del mensaje: [Jquery] Cuadro de noticias.

1- Podemos pegar estos codigos en Texto por encima de la pagina.
Código:
<script type="text/javascript" src="http://design-ofw.host22.com/PWG/cuadronoticias/jquery00.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   
   var first = 0;
   var speed = 700;
   var pause = 3500;
   
      function removeFirst(){
         first = $('ul#listticker li:first').html();
         $('ul#listticker li:first')
         .animate({opacity: 0}, speed)
         .fadeOut('slow', function() {$(this).remove();});
         addLast(first);
      }
      
      function addLast(first){
         last = '<li style="display:none">'+first+'</li>';
         $('ul#listticker').append(last)
         $('ul#listticker li:last')
         .animate({opacity: 1}, speed)
         .fadeIn('slow')
      }
   
   interval = setInterval(removeFirst, pause);
});
</script>
<style type="text/css">
#listticker{
   height:200px;
   width:400px;
   overflow:hidden;
   border:solid 1px #DEDEDE;
   padding:6px 10px 14px 10px;;
}
#listticker li{
   border:0; margin:0; padding:0; list-style:none;
}

   #listticker li{
      height:60px;
      padding:5px;
      list-style:none;
   }
      #listticker a{
         color:#000000;
         margin-bottom:
      }
      #listticker .news-title{
         display:block;
         font-weight:bold;
         margin-bottom:4px;
         font-size:11px;
      }
      #listticker .news-text{
         display:block;
         font-size:11px;
         color:#666666;
      }
      #listticker img{
         float:left;
         margin-right:14px;
         padding:4px;
         border:solid 1px #DEDEDE;
      }
</style>


2- El codigo HTML lo pegaremos donde queremos que este.
Código:
<ul id="listticker">
   <li>
      <img src="http://design-ofw.host22.com/PWG/cuadronoticias/10000000.png" />
      <a href="" class="news-title">Titulo 1</a> Contenido de la Noticia 1</li>

   <li>
      <img src="http://design-ofw.host22.com/PWG/cuadronoticias/20000000.png" /><a href="" class="news-title">Titulo
      2</a> Contenido de la Noticia 2</li>
   <li>
      <img src="http://design-ofw.host22.com/PWG/cuadronoticias/30000000.png" />
      <a href="" class="news-title">Titulo 3</a> Contenido de la Noticia 3</li>
   <li>

      <img src="http://design-ofw.host22.com/PWG/cuadronoticias/40000000.png" />
      <a href="" class="news-title">Titulo 4</a> Contenido de la Noticia 4</li>
</ul>


- Para agregar mas de 4 noticias utilizaremos el siguiente codigo.
Código:
<li>
      <img src="http://design-ofw.host22.com/PWG/cuadronoticias/30000000.png" />
      <a href="" class="news-title">Titulo 3</a> Contenido de la Noticia 3</li>


Vista Previa:
http://design-pwg.es.tl/cuadronoticias.htm

Saludos!
Design-PWG.
______________

10 años ayudando a PWG.

Soporte PWG: ayuda@paginawebgratis.es
Reportes: support-es@webme.com


Ultima edición por design-pwg el Lun Sep 12, 2011 2:16 pm; editado 3 veces
Mensaje12-09-2011, 18:18 (UTC)    
Título del mensaje:

Muy buen aporte anque estubiese bueno que tubiera un diseño...
______________
http://img.webme.com/pic/a/ayuda031/firma012221.png imagen redimensionada por exceso de tamaño
Mensaje12-09-2011, 18:35 (UTC)    
Título del mensaje:

Ezte aporte lo ocuparé!!! Graz por compartirlooo


______________


https://radiovijaer.es.tl/
Mensaje12-09-2011, 18:40 (UTC)    
Título del mensaje:

ayuda031 Muchas gracias por visitar el aporte.

radiovijaer Que bueno que te gusto, espero verlo pronto en tu web.

Saludos!
______________

10 años ayudando a PWG.

Soporte PWG: ayuda@paginawebgratis.es
Reportes: support-es@webme.com
Mensaje12-09-2011, 18:50 (UTC)    
Título del mensaje:

buen aporte y saludos
______________
Reglas del Foro

¿Dónde hacer mi tema/post?
Mensaje12-09-2011, 18:53 (UTC)    
Título del mensaje:

Muy bueno , enserio , garantizzo que también lo ocuparé XD
______________
/forosadas @forosadas
forosadas@hotmail.fr
"Tu mente es tu límite"
Mensaje12-09-2011, 19:04 (UTC)    
Título del mensaje:

nuestrasxarlas Muchas gracias, Agradezco que visites todos mis aportes

babosadas Espero verlo pronto, Si me avisas mejor eh! Ja. Muchas gracias como siempre muy agradecido por todo!

Saludos!
Design-PWG.
______________

10 años ayudando a PWG.

Soporte PWG: ayuda@paginawebgratis.es
Reportes: support-es@webme.com


Ultima edición por design-pwg el Lun Sep 12, 2011 3:05 pm; editado 1 vez
Mensaje12-09-2011, 19:48 (UTC)    
Título del mensaje:

Mmm interesante codigo me gusto mucho por los efecto buen aporte saludos
______________
Twitter ZoneFacil
Facebook ZoneFacil
Mensaje12-09-2011, 19:54 (UTC)    
Título del mensaje:

Excelente aporte, está muy bueno!
Mensaje12-09-2011, 20:00 (UTC)    
Título del mensaje:

zonefacil Muchas gracias, me gusto mucho y decici traerlo.

insaniquarium-deluxe
Muchisimas gracias compañero.

Un saludo a todos!
Design-PWG.
______________

10 años ayudando a PWG.

Soporte PWG: ayuda@paginawebgratis.es
Reportes: support-es@webme.com
Mensaje12-09-2011, 20:04 (UTC)    
Título del mensaje: Re: [Jquery] Cuadro de noticias.

Excelente aporte muy bueno seguramente lo usare en mi web!!

salu2!
______________
Visitar sitio web


Mensaje12-09-2011, 20:29 (UTC)    
Título del mensaje: Re: [Jquery] Cuadro de noticias.

Muchas gracias todaweb7. Espero verlo pronto en tu web.

Saludos!
Design-PWG.
______________

10 años ayudando a PWG.

Soporte PWG: ayuda@paginawebgratis.es
Reportes: support-es@webme.com
Mensaje12-09-2011, 23:39 (UTC)    
Título del mensaje:

Muy bueno el aporte Desing-pwg me sera util este codigo algun dia.

Saludos
______________

Noticias Relevantes
Diablo III llegara el 15 de mayo
Se desvela Angry Birds Space
Call of Duty: Black Ops 2 podria anunciarse el 28
La portatil Neo Geo es oficial
Hemos activado nuestro foro... ¡ Entrar al foro !
Mensaje13-09-2011, 00:45 (UTC)    
Título del mensaje: Re: [Jquery] Cuadro de noticias.

Esta muy Bueno . Capaz lo use. Saludos
Mensaje13-09-2011, 10:15 (UTC)    
Título del mensaje:

Muchas gracias a ambos. se agradece el comentario.

Saludos!
______________

10 años ayudando a PWG.

Soporte PWG: ayuda@paginawebgratis.es
Reportes: support-es@webme.com
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group