Question

我是jQuery的新手并提前道歉，如果答案是，我怀疑，非常简单。

我一直试图让两个马戏团跑，一个在另一个之下。但是，他们一直在克隆，所以我最终得到了四个。我该如何解决这个问题？

我的html文档如下所示：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.marquee.js"></script>
<script>
        $(function(){
            $('.marquee').marquee({
                //speed in milliseconds of the marquee
                speed: 350000,
                //gap in pixels between the tickers
                gap: 50,
                //gap in pixels between the tickers
                delayBeforeStart: 0,
                //'left' or 'right'
                direction: 'left'
            });
        }); 
</script>
<style type="text/css">
        body {
          font-family:Verdana, Geneva, sans-serif;
          color: #FFF;
          background-color: #333;
        }

        .marquee {
margin-top: 150px;
width: 1580px;
overflow: hidden;
border:0px;
line-height:300px;
font-size:64pt;
vertical-align: top;
position: absolute;
left: 11px;
        }

        .marquee p {    
        margin-top: 10px;
        line-height:100px;
        }

        price {
            font-size:54pt; 
            color: #CCC;
            vertical-align: baseline;
            font-size: 54pt;
            position: relative;
            bottom: -50pt;
        }
</style>
<title>  </title>
</head>

<body>
<div class='marquee'>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

AAPL<price>586.92 <img src="down.png"> -9.62</price> 
GOOG<price>690.00 <img src="up.png"> +2.41</price> 
IBM<price>195.3375 <img src="down.png"> -1.81</price> 
MSFT<price>29.695 <img src="up.png"> +0.18</price> 
AMZN<price>234.60 <img src="up.png"> +2.46</price> 
PM<price>87.67 <img src="up.png"> +0.08</price> 
QCOM<price>59.67 <img src="down.png"> -0.06</price> 
SLB<price>69.25 <img src="down.png"> -0.90</price> 
ORCL<price>31.50 <img src="up.png"> +0.02</price> 
KO<price>37.3067 <img src="down.png"> -0.02</price> 
XOM<price>90.56 <img src="down.png"> -1.02</price> 
PFE<price>24.82 <img src="up.png"> +0.27</price> 
GE<price>21.4799 <img src="up.png"> +0.14</price> 
CVX<price>108.66 <img src="down.png"> -2.80</price> 

<p>

FITB<price>14.45 <img src="down.png"> -0.11</price> 
DFS<price>41.35 <img src="up.png"> +0.03</price> 
EIX<price>47.02 <img src="up.png"> +0.31</price> 
GRA<price>66.09 <img src="up.png"> +0.28</price> 
M<price>40.95 <img src="up.png"> +0.43</price> 
AON<price>55.18 <img src="up.png"> +0.38</price> 
BXP<price>107.16 <img src="up.png"> +0.70</price> 
CNP<price>21.69 <img src="down.png"> -0.05</price> 
NBL<price>95.07 <img src="down.png"> -0.33</price> 
APC<price>70.68 <img src="up.png"> +0.34</price> 
AYI<price>64.69 <img src="down.png"> -1.40</price> 
</p>
</div>

</body>
</html>

我上面提到的jQuery marquee脚本（jquery.marquee.js）是Aamir Afridi的，见下文：

/**
 * jQuery.marquee - scrolling text horizontally
 * Date: 11/01/2013
 * @author Aamir Afridi - aamirafridi(at)gmail(dot)com | http://www.aamirafridi.com
 * @version 1.0
 */

;(function($) {
$.fn.marquee = function(options) {
    return this.each(function() {
        // Extend the options if any provided
        var o = $.extend({}, $.fn.marquee.defaults, options),
            $this = $(this),
            $marqueeWrapper,
            elWidth;

        //check if element has data attributes. They have top priority
        o = $.extend({}, o, $this.data());

        //wrap inner content into a div
        $this.wrapInner('<div class="js-marquee"></div>');

        //Make copy of the element
        $this.find('.js-marquee').css({
            'margin-right': o.gap, 
            'float':'left'
        }).clone().appendTo($this);

        //wrap both inner elements into one div
        $this.wrapInner('<div style="width:100000px" class="js-marquee-wrapper"></div>');

        //Save the width of the each element so we can use it in animation
        elWidth = $this.find('.js-marquee:first').width() + o.gap;

        //Save the reference of the wrapper
        $marqueeWrapper = $this.find('.js-marquee-wrapper');

        //Animate recursive method
        var animate = function() {
            //Move to zero possition
            $marqueeWrapper.css('margin-left', o.direction == 'left' ? 0 : '-' + elWidth + 'px');
            //Start animating to wards left
            $marqueeWrapper.animate({
                    'margin-left': o.direction == 'left' ? '-' + elWidth + 'px' : 0
                },
                o.speed, 'linear',
                animate
            );
        };

        //Starts the recursive method
        setTimeout(animate, o.delayBeforeStart);

    });
};//End of Plugin

// Public: plugin defaults options
$.fn.marquee.defaults = {
    //speed in milliseconds of the marquee
    speed: 10000,
    //gap in pixels between the tickers
    gap: 20,
    //gap in pixels between the tickers
    delayBeforeStart: 1000,
    //'left' or 'right'
    direction: 'left'
};
})(jQuery);

您可以在行动here中看到它。

再次感谢你。

Answer 1

您有四行，因为您的内容对于您设置的宽度来说太宽，而且插件在其容器div中使用的宽度也太宽。所以它正在环绕并为您提供额外的行。您可以将您的品牌类更改为：

.marquee {
  margin-top: 150px;
  white-space:nowrap;
  overflow: hidden;
  border:0px;
  line-height:300px;
  font-size:64pt;
  vertical-align: top;
  position: absolute;
  left: 11px;
}

我取出了width并添加了white-space: nowrap，因此您的文字不会换行并垂直向下流动。此外，在插件代码中，您需要更改此行：

//wrap both inner elements into one div
$this.wrapInner('<div style="width:100000px" class="js-marquee-wrapper"></div>');

对此：

//wrap both inner elements into one div
$this.wrapInner('<div class="js-marquee-wrapper"></div>');

您可以完全删除宽度样式，它似乎工作正常。如果您不想编辑插件代码，也可以添加此样式以覆盖宽度：

.js-marquee-wrapper {
  width: auto !important;
}

Answer 2

我开发了这个插件。这旨在具有滚动的简单内容。我可以看到您有许多元素，包括<p>，默认情况下为display:block，因此这会将内容推送到下一行。

最简单的解决方案是将此添加到您的css：

.marquee p {
  display: inline;
}

在行动http://jsfiddle.net/aamir/R464v/2/

中查看

所以在你的演示中：

.marquee p {    
    margin-top: 10px;
    line-height:100px;
    display: inline; /* <============ ADD THIS TO YOUR CSS */
}

那应该是诀窍;）

我通过删除一些html使您的示例更简单但保持相同的结构。 Try this

需要两个马戏团，但他们一直在克隆

2 个答案: