Question

我正在尝试使用以下库：

liScroll（jQuery News Ticker变得简单）1.0（Demo）

我把它放在我的网站上并且它工作得很好，但只有RTL方向，问题是我无法改变它从左向右滚动。我试图更改JavaScript文件，但它无法正常工作。这是我的代码：

jQuery.fn.liScroll = function(settings) {
    settings = jQuery.extend({
    travelocity: 0.07
    }, settings);       
    return this.each(function(){
            var $strip = jQuery(this);
            $strip.addClass("newsticker")
            var stripWidth = 1;
            $strip.find("li").each(function(i){
            stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar and Fabien Volpi
            });
            var $mask = $strip.wrap("<div class='mask'></div>");
            var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");                             
            var containerWidth = $strip.parent().parent().width();  //a.k.a. 'mask' width   
            $strip.width(stripWidth);           
            var totalTravel = stripWidth+containerWidth;
            var defTiming = totalTravel/settings.travelocity;   // thanks to Scott Waye     
            function scrollnews(spazio, tempo){
            $strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", containerWidth); scrollnews(totalTravel, defTiming);});
            }
            scrollnews(totalTravel, defTiming);             
            $strip.hover(function(){
            jQuery(this).stop();
            },
            function(){
            var offset = jQuery(this).offset();
            var residualSpace = offset.left + stripWidth;
            var residualTime = residualSpace/settings.travelocity;
            scrollnews(residualSpace, residualTime);
            });         
    });};

也许我还需要更改CSS代码？

Answer 1

演示：here

像这样更新HTML：

<ul id="ticker01" style="left: -700px">
    <li><span>10/10/2007</span><a href="#">The first thing ...</a></li>
    <li><span>10/10/2007</span><a href="#">End up doing is ...</a></li>
    <li><span>10/10/2007</span><a href="#">The code that you ...</a></li>
    <!-- eccetera -->
</ul>

JS就像这样：

jQuery.fn.liScroll = function(settings) {
    settings = jQuery.extend({
        travelocity: 0.07
    }, settings);
    return this.each(function() {
        var $strip = jQuery(this);
        $strip.addClass("newsticker")
        var stripWidth = 1;
        $strip.find("li").each(function(i) {
            stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar and Fabien Volpi
        });
        var $mask = $strip.wrap("<div class='mask'></div>");
        var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");
        var containerWidth = $strip.parent().parent().width(); //a.k.a. 'mask' width  
        $strip.width(stripWidth);
        var totalTravel = stripWidth + containerWidth;
        var defTiming = totalTravel / settings.travelocity; // thanks to Scott Waye 

        function scrollnews(spazio, tempo) {
            $strip.animate({
                left: '+=' + spazio
            }, tempo, "linear", function() {
                $strip.css("left", -stripWidth);
                scrollnews(totalTravel, defTiming);
            });
        }
        scrollnews(totalTravel, defTiming);
        $strip.hover(function() {
                jQuery(this).stop();
            },
            function() {
                var offset = jQuery(this).offset();
                var residualSpace = offset.left + stripWidth;
                var residualTime = residualSpace / settings.travelocity;
                scrollnews(residualSpace, residualTime);
            });
    });
};

演示：here

Answer 2

我想我明白了：

jQuery.fn.liScroll2 = function(settings) {
        settings = jQuery.extend({
        travelocity: 0.07
        }, settings);       
        return this.each(function(){
                var $strip = jQuery(this);
                $strip.addClass("newsticker")
                var stripWidth = 1;
                $strip.find("li").each(function(i){
                stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar and Fabien Volpi
                });
                var $mask = $strip.wrap("<div class='mask'></div>");
                var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");                             
                var containerWidth = $strip.parent().parent().width();  //a.k.a. 'mask' width   
            $strip.css("left", -containerWidth);
                $strip.width(stripWidth);           
                var totalTravel = stripWidth+containerWidth;
                var defTiming = totalTravel/settings.travelocity;   // thanks to Scott Waye     
                function scrollnews(spazio, tempo){
                $strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", -containerWidth); scrollnews(totalTravel * -1, defTiming);});
                }
                scrollnews(totalTravel, defTiming);             
                $strip.hover(function(){
                jQuery(this).stop();
                },
                function(){
                var offset = jQuery(this).offset();
                var residualSpace = offset.left + stripWidth;
                var residualTime = residualSpace/settings.travelocity;
                scrollnews(residualSpace * -1, residualTime);
                });         
        }); 
};

我必须将条带的起始位置更改为负值，然后将totalTravel乘以-1。

请在此处查看示例：http://jsfiddle.net/9Tkj2/2/

无法改变新闻自动收报机的方向

2 个答案: