jQuery przewijanie tekstu z boku na bok

Question

Widziałem laboratoria Giva "marquee scroller i SerialScroll, ale nie mogę dowiedzieć się, jak uzyskać przewijanie tekstu w div z boku na bok. Domyślam się, że potrzebuję innego rodzaju rozszerzenia.

Zasadniczo, mam div o szerokości 100px i tekst, który obejmuje 200px i zamiast przewijać go przez całą drogę jak marquee, chcę go przewinąć w lewo, aż osiągnie koniec, a następnie przynieść go z powrotem. Więc przewijanie z boku na bok.

Sugestie?

Answer 1

This strona ma przewijanie marquee na boki - może być warta checking out.

Answer 2

Natknąłem się na to stanowisko wczoraj, kiedy szukałem czegoś, co mogłoby zrobić to samo. Chociaż wybrałem inną drogę, zorientowałem się, jak to osiągnąć.

Po pierwsze, potrzebujesz swojego znacznika. Mamy zamiar używać znaczników DIV dla tego przykładu:

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

Następny musimy go styl:

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

Teraz musimy niektóre 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'); 
}); 

I tam masz to! Miły mały namiot typu side-to-side.

OŚWIADCZENIE: Nawet tego nie przetestowałem, a większość z tego jest poza moim zasięgiem, ale powinieneś być w stanie opracować drobne załamania, jeśli takie istnieją, ponieważ istnieje podstawowa koncepcja.

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

Używam jScroller przez Markusa Bordihna.

Mam próbka pracy w górnej części mojego bloga: http://www.leniel.net/

Markus zdarza się również, aby mieć autonomiczną wersję, która jest jScroller2. Ten nie wymaga jQuery.

pobrania dostępne są tutaj: http://jscroller.markusbordihn.de/download/

Answer 5

można nadać wygląd jRollingNews. Możesz wyświetlić dowolny kanał RSS lub dowolną niestandardową zawartość. Użyj ich generatora kodu, to znacznie ułatwia i masz podgląd.

Nota prawna: Zrobiłem to.

Answer 6

Zdecydowałem się wziąć Stephen Delano's answer i faktycznie działa. Ulepszyłem też to.

Mój skrypt uaktywnia się po najechaniu myszą za pomocą myszki.

Here is my JSFiddle.

I tu jest właśnie scenariusz:

$('.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); 
     }); 

Jeśli chcesz mieć to auto-scroll i nie czekać na jakiekolwiek zdarzenia myszy you could do this. Jeśli chcesz zmienić szybkość przewijania, musisz zmienić 10 na inny numer. Im większa liczba, tym wolniej przewijany.