Question

我有这个用于滚动文字的脚本。

window.requestAnimationFrame = (function(){
            return  window.requestAnimationFrame       ||
                    window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame    ||
                    function( callback ){
                        window.setTimeout(callback, 1000 / 60);
                    };
        })();

        var speed = 6000;
        (function currencySlide(){
            var currencyPairWidth = $('.slideItem:first-child').outerWidth();
            $(".slideContainer").animate({marginLeft:-currencyPairWidth},speed, 'linear', function(){
                $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));
            });
            requestAnimationFrame(currencySlide);
        })();

HTML

<div class='slider'>
            <div class="edge"></div>
            <ul class="slideContainer" id="money_start">
            <li class="slideItem">
             <span>Vestibulum ante ipsum primis in faucibus orci luctus</span>
            </li>
            </ul>
        </div>

问题：它是从右向左滚动文本，但我想从左到右滚动文本。帮助我找到最好的解决方案。

Answer 1

你是说这个意思吗？这似乎更容易。

＆＃13;

$('.slideItem').animate({right: 0}, 1000);
$('.slideItem').animate({left: 0}, 1000);

＆＃13;

.slideItem {
  position: absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideItem">TEXT</div>

＆＃13;

Answer 2

几行更改，动画从左到右发生（正如您所要求的那样）。

window.requestAnimationFrame = (function () {
        return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                function (callback) {
                    window.setTimeout(callback, 1000 / 60);
                };
    })();

            var speed = 600;
    (function currencySlide() {
        var currencyPairWidth = $('.slideItem:first-child').outerWidth();
        $(".slideContainer").css("marginLeft", -currencyPairWidth + 500);//Added this line
        $(".slideContainer").animate({ marginLeft: 75 }, speed, 'linear');
        requestAnimationFrame(currencySlide);
    })();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='slider'>
        <div class="edge">
        </div>
        <ul class="slideContainer" id="money_start">
            <li class="slideItem"><span>Vestibulum ante ipsum primis in faucibus orci luctus</span>
            </li>
        </ul>
    </div>

使用jquery幻灯片滚动条从左向右移动文本

2 个答案: