By: Ninguno zolo Amant a la muzikaa.!! on 11:23 p.m.

Hay una gran cantidad de plugins jQuery New Ticker con gran cantidad de opciones que se pueden utilizar. ¿Quieres aprender a crear uno por su cuenta en tan solo 4 líneas de código jQuery od?

La idea es bastante simple, tome primer elemento de la lista, aplicar algún efecto desaparece en él y en la devolución de llamada adjuntarlo al final de la lista.
En primer lugar tenemos que crear HTML con la lista de nuestras noticias, algo como esto:

             <ul id="ticker">

  <li>
   jqBarGraph es plugin de jQuery que te da la libertad para visualizar fácilmente los datos en forma de gráficos. Hay tres tipos de gráficos: simple, múltiple y apilados.
  </ Li>
  <li>
   Aprenda a crear galería de imágenes en 4 líneas de Jquery
  </ Li>
  <li>
   jqFancyTransitions es fácil de usar plugin de jQuery para mostrar las fotos como presentación de diapositivas con efectos de transición de fantasía.
  </ Li>
  <li>
   mooBarGraph es AJAX complemento gráfico de MooTools que soportan dos tipos de gráficos, simples barras y gráfico de barras apiladas.
  </ Li>
 </ul>

hora, vamos a poner un poco de estilo al respecto. Vamos a establecer la altura del área de ticker visible y fijar a desbordamiento oculta. Si queremos sólo una noticia a ser visible en el momento en que la altura ticker debe ser la misma que la altura de cada elemento de la lista. Para noticias al mismo tiempo, más visible que sólo tenemos que multiplicar la altura de cada elemento con el número de noticias que queremos que sea visible y establecer que a medida que la altura del ticker.

# Ticker {
 altura: 40px;
 overflow: hidden;
}
# Ticker li {
 altura: 40px;
}

Por supuesto, usted puede y debe añadir más estilo de aquí, pero esto va a ser suficiente para hacer que su ticker funcione.
Ok, tenemos que configurar la presentación y ahora es el momento para hacer esta noticia para empezar marcando. En primer lugar vamos a crear la función que se aplicará efecto desaparece en el primer elemento, agregar ese elemento al final de la lista después de que desaparezca y revertir efectos de los cambios. Después de eso, todo lo que tenemos que hacer es llamar a esa función en los intervalos deseados.







Y aquí está el código claro:
tick function () {
 . $ ('# Ticker li: first') slideUp; (function () {$ (this) appendTo ($ ('# ticker')) slideDown ()..})
}
setInterval (function () {tick ()}, 5000);


Por supuesto, puede cambiar slideUp con cualquier otra animación que quieras, pero no te olvides de volver efectos sobre elementos después de la transición. Siguiente ejemplo creará opacidad a 0 para el primer elemento.
tick function () {
 $ ('# Ticker li: first') animación ({'opacidad': 0}., 200, function () {$ (this) appendTo ($ ('# ticker')) css ('opacidad', 1.. );});
}
setInterval (function () {tick ()}, 4000);


Y por favor no se olvide de incluir jQuery en la cabecera del documento
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"> </ script>


Eso es todo, barra de noticias se hace.