2
我很新的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'>
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.js）jQuery的字幕腳本是阿米爾阿夫裏迪的，見下圖：
/**
* 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。
非常感謝。
這樣做很有意義。再次感謝你的幫助，真的讓我有一天！ – lily
好的回答正是我剛纔說的，我意識到你已經發布了它。 – Epik