1. 程式人生 > >js實現展示時間上下連續滾動

js實現展示時間上下連續滾動

html中內容:

<div class="time" >

<span class="t">交易時段(北京時間):</span>
 <div class="c">
<ul id="scrollCtpTime">
<#list 0..(timesList?size - 1) as i>
<li>
  <#if timesList.get(i).timeType==0>早盤:
<#elseif timesList.get(i).timeType==1>午盤:
<#elseif timesList.get(i).timeType==2>夜盤:
</#if>
${timesList.get(i).startTime!}-${timesList.get(i).endTime!}
<#if timesList.get(i).stopTime?exists && timesList.get(i).stopTime?length gt 0>,${timesList.get(i).stopTime}系統自動平倉
</#if>
</li>
</#list>
</ul>
</div>

</div>

js中內容:

<!--交易時段滾動 -->
<script>
var scroll;
function scrollCtp(){
scroll = null;
if ($('#scrollCtpTime').children('li').length >= 2) {
$('#scrollCtpTime').animate({
marginTop : '-24px'
}, 1500, function() {
if (scroll == null) {
$('#scrollCtpTime').children('li:first').appendTo($('#scrollCtpTime'));
                $('#scrollCtpTime').css('marginTop', '0px');
scroll = setTimeout("scrollCtp()",1000);
}
});
}
}
$('#scrollCtpTime').parent().hover(function() {
if (scroll != null) {
clearTimeout(scroll);
scroll = null;
}
}, function() {
if (scroll == null) {
scroll = setTimeout("scrollCtp()", 1000);
}
});
scroll = setTimeout("scrollCtp()", 1000);
</script>