私は jQuery に非常に慣れていないため、答えが非常に単純であると思われる場合は、事前にお詫び申し上げます。
私は、2 つのマーキーを上下に並べて実行しようとしています。しかし、彼らはクローンを作り続けているので、私は 4 つになってしまいました。この問題を解決するにはどうすればよいですか?
私の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 マーキー スクリプト (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);
ここで実際の動作を見ることができます。
どうもありがとうございました。