html 部分
<div id="scroll_div" class="fl">
<div id="scroll_begin" style="text-align:center;">
<c:forEach var="list" items="${notice}" varStatus="status">
<span style="color:#3366CC;font-size: 15px;"><b>${list.TITLE}:</b>${list.CONTENT}</span>
</c:forEach>
</div>
<div id="scroll_end"></div>
</div>
js部分
<script>
function ScrollImgLeft(){
var speed=50;//初始化速度 也就是字体的整体滚动速度
var MyMar = null;//初始化一个变量为空 用来存放获取到的文本内容
var scroll_begin = document.getElementById("scroll_begin");//获取滚动的开头id
var scroll_end = document.getElementById("scroll_end");//获取滚动的结束id
var scroll_div = document.getElementById("scroll_div");//获取整体的开头id
scroll_end.innerHTML=scroll_begin.innerHTML; //滚动的是html内部的内容,原生知识!
//定义一个方法
function Marquee(){
if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
scroll_div.scrollLeft-=scroll_begin.offsetWidth;
else
scroll_div.scrollLeft++;
}
MyMar=setInterval(Marquee,speed);//给上面的方法设置时间 setInterval
//鼠标点击这条公告栏的时候,清除上面的方法,让公告栏暂停
scroll_div.onmouseover = function(){
clearInterval(MyMar);
}
//鼠标点击其他地方的时候,公告栏继续运动
scroll_div.onmouseout = function(){
MyMar = setInterval(Marquee,speed);
}
}
ScrollImgLeft();
</script>
弊端:因为这样实现的原理是两个div来换切换,如果公告条内容过短,滚动可能会只持续一段时间就暂停,想要可以一直滚动,可以修改结束div,把结束div加长.
scroll_end.innerHTML = scroll_begin.innerHTML+ scroll_begin.innerHTML+scroll_begin.innerHTML+scroll_begin.innerHTML+scroll_begin.innerHTML;