在同一页面中的两个马戏团与不同的风格

Question

我希望在我的一页中有两种选框样式。

一个从右向左滚动，另一个从下往上滚动。

但在我的情况下，两个都在同一个方向滚动，它们都在同一个同步，我不想要。下面是我的代码

<table>

<tr>
<td class="msg" align="left" width="170">Application Availability : </td>
<td>
<div class="marquee">first data to scroll right to left</div>
</td>
</tr>
</table>

<tr>
<td>
<div class="marquee" style="background:#6699ff; width:840px;">text to scroll bottom to top</div>
</td>
</tr>
</table>
<table>

<tr>
<td>
<div class="marquee" style="background:#ffcc66;width:840px;">text to scroll bottom to top</div>
</td>
</tr>
</table>
<table>

我的java脚本如下

$(document).ready(function () {
var $diaplay = $('#display'), counter = 0;
$('.marquee')
    .bind('beforeStarting', function(){

    })
    .bind('finished', function(){
        counter++;

    })

.marquee({
    duration: 10000
})
});

如果我正在尝试使用以下脚本，两者都会以较小的高度向上移动

 $(function () {
$('.marquee').marquee({
    speed: 10000,
    gap: 50,
    delayBeforeStart: 0,
    direction: 'up'
    //,duplicated: true
});
});