单行多条信息滚动

yxgblog

//css样式
#shangfan{font-size: 12px; line-height:24px; height:24px; width:500px;overflow:hidden;}
#shangfan ul{margin: 0px 10px;padding: 0px;list-style-type: none;}
#shangfan ul li{/*文字超出本行，自动省略*/overflow:hidden;text-overflow:ellipsis;white-space: nowrap;margin:0;padding: 0px;}
 
//页面显示
<div id="shangfan">
<div id="holder">
<ul>
<li>媒体报道：光速中国光速中国光速中国光速中国光速中国</li>
<li>媒体报道：光速中国光速中国光速中国光速中国光速中国第二条</li>
<li>媒体报道：光速中国光速中国光速中国光速中国光速中国第三条</li>
</ul></div>
//js代码
<script type="text/javascript">
function marquee(height,speed,delay){
var scrollT;
var pause = false;
var ScrollBox = document.getElementById("shangfan");
if(document.getElementById("holder").offsetHeight <= height) return;
var _tmp = ScrollBox.innerHTML.replace('holder', 'holder2')
ScrollBox.innerHTML += _tmp;
ScrollBox.onmouseover = function(){pause = true}
ScrollBox.onmouseout = function(){pause = false}
ScrollBox.scrollTop = 0;
function start(){
     scrollT = setInterval(scrolling,speed);
     if(!pause) ScrollBox.scrollTop += 2;
}
function scrolling(){
     if(ScrollBox.scrollTop % height != 0){
         ScrollBox.scrollTop += 2;
         if(ScrollBox.scrollTop >= ScrollBox.scrollHeight/2) ScrollBox.scrollTop = 0;
     }
   else{
         clearInterval(scrollT);
         setTimeout(start,delay);
     }
}
setTimeout(start,delay);
}
marquee(24,30,3000);
</script>