Ver Mensaje Individual
  #1 (permalink)  
Antiguo 06/04/2012, 11:24
fher2010
 
Fecha de Ingreso: agosto-2010
Mensajes: 44
Antigüedad: 13 años, 8 meses
Puntos: 4
Slide de noticias, una ayudita porfa

Saludos cordiales, no estoy muy seguro si debería publicar esto aquí o en la parte de Js, por favor si estoy mal les rogaría mover el post ....

El asunto es el siguiente ... desde hace mucho buscaba el scrip para incluir a mi sitio el tan deseado "Slide" para noticias ... pero de texto, no de imágenes. Ese tipo marquesina pero q a diferencia de usar <MARQUEE> y hacer pasar el texto como si se trataran de los títulos o créditos de una película, realice barridos por párrafos ..

Bueno me topé con este script, es cual está muy interesante y pueden verlo y descargarlo del siguiente sitio ... http://www.jugbit.com/jquery-vticker-vertical-news-ticker/ .. incluso hay un ejemplo para ver como trabaja ... http://www.jugbit.com/jquery/vticker.php

Ahora bién ... la explicación de como utilizarlo se ve q tan solo hay q declarar una .clase la cual luego se llama desde la etiqueta <div class"LA_CLASE"> ... y listo .. todo de 10 .....

Lo lamentable es q por mas FACIL q parece .. no me doy cuenta y no se como poder utilizar y aplicar este script en mi sitio ... ¿dónde declaro la .CLASE? .. en el Js?? .. en el código HTML entre las etiquetas <script type></script>??

Lo q hice hasta ahora fue descargar el escript .... luego lo coloqué dentro del directorio de mi sitio en una carpeta llamada js

En el código HTML hago la llamada al archivo js de la siguiente manera: <script type="text/javascript" src="js/jquery.vticker.js"></script>

y hasta ahí llego ... pos no se donde o como hacer la declaracion de la famosa clase .. se supone q en el código html se aplicaría así

Código HTML:
Ver original
  1. <div class"LA_CLASE_A_DECLARAR">
  2. <ul>
  3. <li>TEXTO INFORMATIVO NRO 1</li>
  4. <li>OTRO TEXTO INFORMATIVO</li>
  5. </ul>
  6. </div>

en fin espero q me puedan dar una ayuda ... creo q es cuestion de dos líneas y asunto solucionado .. pero no se donde, como ... jejeje .. Gracias anticipadas ...
de todas formas adjunto el código Js, q como indiqué antes pueden descargarlo --

Código Javascript:
Ver original
  1. /*
  2. * vertical news ticker
  3. * Tadas Juozapaitis ( kasp3rito [eta] gmail (dot) com )
  4. * http://www.jugbit.com/jquery-vticker-vertical-news-ticker/
  5. */
  6. (function($){
  7. $.fn.vTicker = function(options) {
  8.     var defaults = {
  9.         speed: 700,
  10.         pause: 4000,
  11.         showItems: 3,
  12.         animation: '',
  13.         mousePause: true,
  14.         isPaused: false,
  15.         direction: 'up',
  16.         height: 0
  17.     };
  18.  
  19.     var options = $.extend(defaults, options);
  20.  
  21.     moveUp = function(obj2, height, options){
  22.         if(options.isPaused)
  23.             return;
  24.        
  25.         var obj = obj2.children('ul');
  26.        
  27.         var clone = obj.children('li:first').clone(true);
  28.        
  29.         if(options.height > 0)
  30.         {
  31.             height = obj.children('li:first').height();
  32.         }      
  33.        
  34.         obj.animate({top: '-=' + height + 'px'}, options.speed, function() {
  35.             $(this).children('li:first').remove();
  36.             $(this).css('top', '0px');
  37.         });
  38.        
  39.         if(options.animation == 'fade')
  40.         {
  41.             obj.children('li:first').fadeOut(options.speed);
  42.             if(options.height == 0)
  43.             {
  44.             obj.children('li:eq(' + options.showItems + ')').hide().fadeIn(options.speed).show();
  45.             }
  46.         }
  47.  
  48.         clone.appendTo(obj);
  49.     };
  50.    
  51.     moveDown = function(obj2, height, options){
  52.         if(options.isPaused)
  53.             return;
  54.        
  55.         var obj = obj2.children('ul');
  56.        
  57.         var clone = obj.children('li:last').clone(true);
  58.        
  59.         if(options.height > 0)
  60.         {
  61.             height = obj.children('li:first').height();
  62.         }
  63.        
  64.         obj.css('top', '-' + height + 'px')
  65.             .prepend(clone);
  66.            
  67.         obj.animate({top: 0}, options.speed, function() {
  68.             $(this).children('li:last').remove();
  69.         });
  70.        
  71.         if(options.animation == 'fade')
  72.         {
  73.             if(options.height == 0)
  74.             {
  75.                 obj.children('li:eq(' + options.showItems + ')').fadeOut(options.speed);
  76.             }
  77.             obj.children('li:first').hide().fadeIn(options.speed).show();
  78.         }
  79.     };
  80.    
  81.     return this.each(function() {
  82.         var obj = $(this);
  83.         var maxHeight = 0;
  84.  
  85.         obj.css({overflow: 'hidden', position: 'relative'})
  86.             .children('ul').css({position: 'absolute', margin: 0, padding: 0})
  87.             .children('li').css({margin: 0, padding: 0});
  88.  
  89.         if(options.height == 0)
  90.         {
  91.             obj.children('ul').children('li').each(function(){
  92.                 if($(this).height() > maxHeight)
  93.                 {
  94.                     maxHeight = $(this).height();
  95.                 }
  96.             });
  97.  
  98.             obj.children('ul').children('li').each(function(){
  99.                 $(this).height(maxHeight);
  100.             });
  101.  
  102.             obj.height(maxHeight * options.showItems);
  103.         }
  104.         else
  105.         {
  106.             obj.height(options.height);
  107.         }
  108.        
  109.         var interval = setInterval(function(){
  110.             if(options.direction == 'up')
  111.             {
  112.                 moveUp(obj, maxHeight, options);
  113.             }
  114.             else
  115.             {
  116.                 moveDown(obj, maxHeight, options);
  117.             }
  118.         }, options.pause);
  119.        
  120.         if(options.mousePause)
  121.         {
  122.             obj.bind("mouseenter",function(){
  123.                 options.isPaused = true;
  124.             }).bind("mouseleave",function(){
  125.                 options.isPaused = false;
  126.             });
  127.         }
  128.     });
  129. };
  130. })(jQuery);

Última edición por fher2010; 06/04/2012 a las 11:36 Razón: Errores en el código mostrado