新闻消息滚动（纯js）

方法一：实现的是不间断的滚动 

<marquee direction="up" behavior="scroll" scrollamount="10" scrolldelay="0" width="250" height="600" bgcolor="#fff">
　　<volist name='card' id='var'>
　　　　<p style="width:240px;">
　　　　　　<span ><{$var['account']}></span>
　　　　　　<span style="margin-left:12px;"> 100</span>
　　　　　　<span style="margin-left:25px;"><{$var.complete_time|date='Y-m-d',###}></span>
　　　　</p>
　　</volist>
</marquee>

方法二：实现的是间断的滚动 

 

<!-- 通知提示 -->

<section class="mui-section">

<div class="mui-content" style="padding:5px;background-color: rgba(255, 242, 183, .95);">

<div style="height:18px; line-height:18px; width:1280px; margin:0px 0px 10px 0px;font-size:0.32rem;padding:0px;margin:0px;">

<script>

var marqueeContent=new Array();

<c:forEach items="${noticeMessageList}" var="item" varStatus="status">marqueeContent[${status.index}]='${item}';</c:forEach>

</script>

<script>

var marqueeInterval = new Array();

var marqueeId=0;

var marqueeDelay=5000;

var marqueeHeight=18;

function initMarquee() {

var str=marqueeContent[0];

document.write('<div id=marqueeBox style="overflow:hidden;height:'+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>'+str+'</div></div>');

marqueeId++;

marqueeInterval[0]=setInterval(startMarquee,marqueeDelay);

}

function startMarquee() {

var str=marqueeContent[marqueeId];

marqueeId++;

if(marqueeId>=marqueeContent.length) marqueeId=0;

if(marqueeBox.childNodes.length==1) {

var nextLine=document.createElement('DIV');

nextLine.innerHTML=str;

marqueeBox.appendChild(nextLine);

} else {

marqueeBox.childNodes[0].innerHTML=str;

marqueeBox.appendChild(marqueeBox.childNodes[0]);

marqueeBox.scrollTop=0;

}

clearInterval(marqueeInterval[1]);

marqueeInterval[1]=setInterval("scrollMarquee()",18);

}

function scrollMarquee() {

marqueeBox.scrollTop++;

if(marqueeBox.scrollTop%marqueeHeight==(marqueeHeight-1)){

clearInterval(marqueeInterval[1]);

}

}

initMarquee();

</script>

</div>

</div>

</section>