0

私はニュース Web サイトを開発し、ニュース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 を変更する必要があります。このコードを width = 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 に答える