0

我正在将数据库中的动态内容添加到我在网上找到的字幕中。问题是 - 内容长度变化很大，脚本需要一组静态宽度才能正常工作。我要么需要找出一种在拉取内容时生成宽度的方法，要么让脚本自动为项目生成宽度。实际上，这是我在这里找到的一个非常中肯的脚本。这是一个JSFiddle，看看它是如何工作的。

对于那些不喜欢 JSFiddle 的人，这里有一些简单的 html/css

<h1>This runs differently than the ticker for some reason. It's highly annoying in my personal opinion.</h1>
<div id="ticker">    
    <div class="event">test1</div>
    <div class="event">This is Test 2</div>
    <div class="event">test3</div>
    <div class="event">This is test number 4</div>
</div>​

css

.event{float: left;}
/* Add width and it will run, sorta fine
.event{width:100px;}
*/

​</p>

jQuery

(function($) {
        $.fn.textWidth = function(){
            return $(this).width();
        };

        $.fn.marquee = function(args) {
            var that = $(this);
            var $textWidth = that.textWidth(),
                offset = that.width(),
                width = offset,
                css = {
                    'text-indent' : that.css('text-indent'),
                    'overflow' : that.css('overflow'), 
                    'white-space' : that.css('white-space')
                },
                marqueeCss = {
                    'text-indent' : width,
                    'overflow' : 'hidden',
                    'white-space' : 'nowrap'
                },
                args = $.extend(true, { count: -1, speed: 1e1, leftToRight: false }, args),
                i = 0,
                stop = $textWidth*-1,
                dfd = $.Deferred();
            function go() {
                if (that.data('isStopped') != 1)
                {
                if(!that.length) return dfd.reject();
                if(width == stop) {
                    i++;
                    if(i == args.count) {
                        that.css(css);
                        return dfd.resolve();
                    }
                    if(args.leftToRight) {
                        width = $textWidth*-1;
                    } else {
                        width = offset;
                    }
                }
                that.css('text-indent', width + 'px');
                if(args.leftToRight) {
                    width++;
                } else {
                    width--;
                }
            }

                setTimeout(go, 10);
            };
            if(args.leftToRight) {
                width = $textWidth*-1;
                width++;
                stop = offset;
            } else {
                width--;            
            }
            that.css(marqueeCss);
            that.data('isStopped', 0);
            that.bind('mouseover', function() { $(this).data('isStopped', 1); }).bind('mouseout', function() { $(this).data('isStopped', 0); });
            go();
            return dfd.promise();
        };        
    })(jQuery);
        $('h1').marquee();
        $('#ticker').marquee();​

我想到的第一件事是在生成选取框之前获取每个列表项的宽度，并将宽度内联。我不知道该怎么做，在玩了一段时间后我放弃了。这是它所在网站的链接- 通过 ajax 添加内容。选框位于顶部。稍后我会删除链接。关于我应该做什么的建议？

4

1 回答 1

1

只是一个想法，我没有看到您添加动态部分的代码，但它们必须在<div>标签内吗？你可以.append()改用吗？

就像是：

$('#ticker').append(response.data); //or whatever the variable would be

所以基本上它只是将文本添加到该 div 而不是单独的 div。在添加所有数据之前，您可能不需要开始滚动，以便选取框插件补偿新添加的文本。

或者

以下是一些您可以使用的代码来解决您的初始问题：

将此函数添加到您的代码中：

$.fn.textWidthTrue = function(){
  var html_org = $(this).html();
  var html_calc = '<span>' + html_org + '</span>';
  $(this).html(html_calc);
  var width = $(this).find('span:first').width();
  $(this).html(html_org);
  return width;
};

如此处所示：计算文本宽度

然后添加这个：

$('#ticker').find('.event').each(function(i){ // set the width correctly 
   $(this).width($(this).textWidthTrue());
});

JSFiddle：http: //jsfiddle.net/NYQEL/12/

于 2012-05-15T03:24:20.303 回答