`
hedahai119
  • 浏览: 104704 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

js实现信息滚动显示

    博客分类：
  • js
 
阅读更多 
<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>
分享到：
| jsp页面生成随机验证码
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics