Jquery Marquee的动态内容 - 动态宽度也是？ [英] Dynamic Content For Jquery Marquee - Dynamic Width Also?

问题描述

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

I'm adding dynamic content from a database to a marquee I found online. The problem is - the content length varies widely and the script needs a set, static width for it to work properly. I either need to figure out a way to generate the width while I'm pulling the content, or to have the script auto generate width for items. It's a very to the point script I found on here actually. Here's a JSFiddle to see how it works.

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

For those who don't like JSFiddle here's some simple 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;}
*/

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添加。选框位于顶部。稍后我会删除链接。关于我应该做什么的建议？

The first thing I thought about was to get the width of each list item before generating the marquee, and put the width inline. I couldn't figure out how to do that though and after awhile of playing around with it I gave up. Here's a link to the website it is on - where the content is added via ajax. The marquee is at the top. I'll remove the link after a bit. Suggestions on what I should do?

推荐答案

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

Just an idea, I don't see the code where you're adding the dynamic part but do they have to be inside <div> tags? Could you use .append() instead?

类似于：

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

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

So basically it just adds the text to that div instead of being separate div's. You may need to not start the scrolling until all the data is appended in order for the marquee plugin to compensate for the newly added text.

OR

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

Here is some code you could use that would solve your initial problem:

将此函数添加到代码中：

Add this function to your code:

$.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/

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

这篇关于Jquery Marquee的动态内容 - 动态宽度也是？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！