从列表中滚动的 Js 文本大小有限

Js text scrolling from list is limited in size

本文关键字:文本 Js 列表 滚动      更新时间:2023-09-26

我这里有一个演示设置 http://codepen.io/anon/pen/jqWxvm

在这个javascript中设置的滚动文本量的限制在哪里,它目前不显示li的全部内容

jQuery(function(){
    jQuery("ul#ticker01").liScroll();
}); 
jQuery.fn.liScroll = function(settings) {
    settings = jQuery.extend({
      travelocity: 0.17
    }, 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:

.tickercontainer .mask {width: 1300px !important;}
#ticker01 {float: left; width: auto !important; }

您可以使用"width"属性来显示元素。