jQuery прокручивает текст из стороны в сторону

Question

Я видел маркерный скроллер Giva labs и SerialScroll , но не могу понять, как заставить его прокручивать текст в div из стороны в сторону. Я думаю, мне нужно другое расширение.

По сути, у меня есть div ширины 100px и текст, который охватывает 200px, и вместо того, чтобы прокручивать его как маркер, я хочу прокрутить его влево, пока он не достигнет конца, а затем вернуть его вправо. Итак, боковая прокрутка.

Предложения

Answer 1

Эта страница имеет бегущую прокрутку из стороны в сторону - может стоить проверить .

Answer 2

Я решил взять ответ Стивена Делано и действительно заставить его работать. Я также сделал улучшения на нем.

Мой скрипт активируется при наведении на него мышью.

Вот мой JSFiddle.

А вот и сценарий:

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

Если вы хотите включить автоматическую прокрутку и не ждать никаких событий мыши , вы можете сделать это .

Если вы хотите изменить скорость прокрутки, вам просто нужно заменить 10 на другое число. Чем больше число, тем медленнее прокрутка.

Answer 3

Я наткнулся на этот пост вчера, когда искал что-то, чтобы сделать то же самое. Хотя я пошел другим путем, я понял, как этого добиться.

Во-первых, вам нужна ваша разметка. Мы собираемся использовать теги DIV для этого примера:

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

Далее нам нужно стилизовать его:

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

Теперь нам нужен 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');
});

И вот оно! Милый маленький шатёр из стороны в сторону.

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: Я даже не проверял это, и большая часть этого была у меня на макушке, но вы должны быть в состоянии решить незначительные перегибы, если таковые имеются, потому что есть основная концепция.

Answer 4

Вы можете взглянуть на jRollingNews . Вы можете отобразить любой канал RSS или любой другой контент, который вы хотите. Используйте их генератор кода, это намного упростит вам задачу и у вас будет предварительный просмотр.

Отказ от ответственности: я сделал это.

Answer 5

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});     
     })

}