js实现信息滚动显示

最新推荐文章于 2023-11-17 20:00:00 发布

hedahai119

最新推荐文章于 2023-11-17 20:00:00 发布

阅读量192

点赞数

分类专栏： js 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/hedahai119/article/details/83429856

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏


<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>

hedahai119

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现信息滚动显示

[code="java"]ul,li{margin:0;padding:0;font-size:12px;color:#999;}ul{height:100px;overflow:hidden;}ul li{line-height:20px;height:20px;} “卧槽泥马”：又一网络新词1 “卧槽泥马”：又一网络新词2 “卧槽泥马”...
复制链接

扫一扫

专栏目录