jQuery scroll text side-to-side

Question

Ho visto Giva labs 'marquee scroller e SerialScroll ma non riesco a capire come ottenerlo per scorrere il testo in un div da un lato all'altro. La mia ipotesi è che ho bisogno di un altro tipo di estensione.

Fondamentalmente, ho un div di larghezza 100px e un testo che si estende su 200px e invece di scorrerlo completamente come un perimetro, lo voglio scorrere a sinistra fino a raggiungere la fine e poi riportarlo a destra. Quindi, lo scorrimento side-to-side.

Suggerimenti?

Answer 1

This pagina ha uno scorrimento laterale per lato - potrebbe valere checking out.

Answer 2

Mi sono imbattuto in questo post ieri quando stavo cercando qualcosa per fare la stessa cosa. Anche se ho seguito un percorso diverso, ho capito come ottenere questo risultato.

Innanzitutto, è necessario il markup. Abbiamo intenzione di utilizzare i tag DIV per questo esempio:

<div class="scroll-box"> 
    <div class="scroll-text">This is the text that is too long to fit in the box</div> 
</div> 

Quindi, abbiamo bisogno per lo stile che:

.scroll-box { 
    width: 100px; 
    height: 1.2em; 
    overflow: hidden; 
    position: relative; 
} 
.scroll-text { 
    position: absolute; 
    white-space: nowrap; 
} 

Ora abbiamo bisogno di un po 'di jQuery:

$(document).ready(function() { 
    $('.scroll-box').bind('marquee', function() { 
    var boxWidth = $(this).width; 
    var textWidth = $('.scroll-text', $(this)).width(); 
    if (textWidth > boxWidth) { 
     var animSpeed = textWidth - boxWidth * 20; // 50 pix per sec 
     $(this) 
     .animate({scrollLeft: textWidth - scrollWidth}, animSpeed) 
     .animate({scrollLeft: 0}, animSpeed, function() { 
      $(this).trigger(marquee); 
     }); 
    } 
    }).trigger('marquee'); 
}); 

E il gioco è fatto esso! Un bel tendone side-to-side.

NOTA BENE: non ho nemmeno una prova, e la maggior parte di esso è fuori dalla parte superiore della mia testa, ma si dovrebbe essere in grado di lavorare i nodi minori se ve ne sono, perché il concetto di base è lì.

Answer 3

col3LongText: function() 
{ 
    var $flightsPanel = $('#flightsPanel'); 
    $('.scrollBox', $flightsPanel).mouseover(function() 
    { 
     var boxWidth = $(this).width(); 
     var textWidth = $('.deal-name', $(this)).width(); 

     if (textWidth > boxWidth) 
     {  
      var animSpeed = textWidth - boxWidth; // 50 pix per sec 
      $('.deal-name', $(this)).animate({textIndent: -animSpeed}, 2000); 
     } 

    }).mouseout(function() { 
     $('.deal-name', $(this)).stop().css({textIndent: 0});  
    }) 

} 

Answer 4

Io uso jScroller da Markus Bordihn.

ho un campione di lavoro nella parte superiore del mio blog: http://www.leniel.net/

Markus capita anche di avere una versione autonoma che è jScroller2. Questo non ha bisogno di jQuery.

download sono disponibili qui: http://jscroller.markusbordihn.de/download/

Answer 5

si può dare uno sguardo a jRollingNews. È possibile visualizzare qualsiasi feed RSS o qualsiasi contenuto personalizzato desiderato. Usa il loro generatore di codice, rende le cose molto più semplici e hai un'anteprima.

Disclaimer: Ho fatto questo.

Answer 6

Ho deciso di prendere Stephen Delano's answer e in effetti farlo funzionare. Ho anche fatto dei miglioramenti.

Il mio script si attiva passando con il mouse sopra con esso.

Here is my JSFiddle.

E qui è proprio lo script:

$('.scroll-box').mouseenter(function() { 
      $(this).stop(); 
      var boxWidth = $(this).width(); 
      var textWidth = $('.scroll-text', $(this)).width(); 
      if (textWidth > boxWidth) { 
       var animSpeed = textWidth * 10; 
       $(this).animate({ 
        scrollLeft: (textWidth - boxWidth) 
       }, animSpeed, function() { 
        $(this).animate({ 
         scrollLeft: 0 
        }, animSpeed, function() { 
         $(this).trigger('mouseenter'); 
        }); 
       }); 
      } 
     }).mouseleave(function() { 
      var animSpeed = $(this).scrollLeft() * 10; 
      $(this).stop().animate({ 
       scrollLeft: 0 
      }, animSpeed); 
     }); 

Se si voleva avere lo scorrimento automatico e non aspettare per tutti gli eventi del mouse you could do this.

Se si desidera modificare la velocità dello scorrimento, è sufficiente modificare lo 10 in un altro numero. Più grande è il numero, più lento è lo scorrimento.