jQuery滚动文本左右对齐

Question

我见过Giva labs的marquee滚动条和SerialScroll但是无法弄清楚如何让它在div中从一边到另一边滚动文本.我猜我需要一些其他类型的扩展.

基本上,我有一个宽度为100px的div和跨越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为另一个数字.数字越大,滚动越慢.