0

我开发了新闻网站，我用它jquery.li-scroller.1.0.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", 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);
        });            
    });    
};
4

1 回答 1

1

您应该更改脚本和 CSS。通知我已将此代码用于宽度 = 880

您可以在此站点中查看工作示例：arabic.tasnimnews.com

现在，它是您的 .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);
    });
    var $mask = $strip.wrap("<div class='mask'></div>");
    var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");
    var containerWidth = $strip.parent().parent().width();
    $strip.width(stripWidth);
    var totalTravel = stripWidth + containerWidth;
    var defTiming = totalTravel / settings.travelocity;
    function scrollnews(spazio, tempo) {
        $strip.animate({ right: '-=' + spazio }, tempo, "linear", function () { $strip.css("right", 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 文件的 ul.newsticker 块更改为：

ul.newsticker { /* that's your list */
position: relative;
left: -880px;
list-style-type: none;
margin: 0;
padding: 0; }
于 2013-04-21T11:41:05.003 回答