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

时间:2016-03-07 20:50:01

标签: javascript jquery html

我在这里进行了演示设置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);
        });
    });
};

1 个答案:

答案 0 :(得分:0)

您可以尝试使用以下行修改CSS:

{{1}}

你可以玩&#34;宽度&#34;显示元素的属性。