JS 兑现信息滚动显示
日期：2014-05-16 浏览次数：20322 次
<style type="text/css">
ul,li{margin:0;padding:0;font-size:12px;color:#999;}
ul{height:100px;overflow:hidden;}
ul li{line-height:20px;height:20px;}
</style>
</head>?
<body>????
<ul id="list">
?<li>“卧槽泥马”：又一网络新词1</li>
?<li>“卧槽泥马”：又一网络新词2</li>
?<li>“卧槽泥马”：又一网络新词3</li>
?<li>“卧槽泥马”：又一网络新词4</li>
?<li>“卧槽泥马”：又一网络新词5</li>
?<li>“卧槽泥马”：又一网络新词6</li>
?<li>“卧槽泥马”：又一网络新词7</li>
?<li>“卧槽泥马”：又一网络新词8</li>
?<li>“卧槽泥马”：又一网络新词9</li>
?<li>“卧槽泥马”：又一网络新词10</li>
?<li>“卧槽泥马”：又一网络新词11</li>
?<li>“卧槽泥马”：又一网络新词12</li>
?<li>“卧槽泥马”：又一网络新词13</li>
?<li>“卧槽泥马”：又一网络新词14</li>
</ul>
<script type="text/javascript">?
function scroll(element, delay, speed, lineHeight) {
?var numpergroup = 5;
?var slideBox = (typeof element == 'string')?document.getElementById(element):element;
?var delay = delay||1000;
?var speed=speed||20;
?var lineHeight = lineHeight||20;
?var tid = null, pause = false;
?var liLength = slideBox.getElementsByTagName('li').length;
?var lack = numpergroup-liLength%numpergroup;
?for(i=0;i<lack;i++){
?slideBox.appendChild(document.createElement("li"));
?}
?var start = function() {
?? tid=setInterval(slide, speed);
?}
?var slide = function() {
?? if (pause) return;
?? slideBox.scrollTop += 2;
?? if ( slideBox.scrollTop % lineHeight == 0 ) {
????clearInterval(tid);
????for(i=0;i<numpergroup;i++){
?????slideBox.appendChild(slideBox.getElementsByTagName('li')[0]);
????}
????slideBox.scrollTop = 0;
????setTimeout(start, delay);
?? }
?}
?slideBox.onmouseover=function(){pause=true;}
?slideBox.onmouseout=function(){pause=false;}
?setTimeout(start, delay);
}
scroll('list', 5000, 1, 20 );//停留时间，相对速度（越小越快）,每次滚动多少，最好和Li的Line-height一致。
</script>?
