js原生实现文字无缝间断滚动

六月初六月初 JavaScipt 2019-03-20 15:46:23

网站的开发中无缝间接滚动是使用的很频繁的一个效果，特别是一些新闻或者公告的滚动轮播效果中。

那么关于实现多条新闻或者信息的无缝滚动，每条信息且展示固定时间后继续滚动。以此来达到最小的空间展示最多的信息的效果！

代码实现该效果如下：

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>js原生实现文字无缝间断滚动</title>
		<style>
			#Marquee {
				height:20px;
				overflow: hidden;
				border: 1px solid #f00;
			}

		</style>
	</head>
	<body>
		<style>
			li{
				height: 20px;
			}
		</style>
		<ul  id='Marquee' >
			<li>
				<span class='mr20 pl20 u bc'>六月初</span>
			</li>
			<li>
				<span class='mr20 pl20 u'>六月初博客站</span>
			</li>
			<li>
				<span class='mr20 pl20 u'>六月初生活站</span>
			</li>
		</ul>

		<script>
			var Mar = document.getElementById("Marquee");
			var child_div = Mar.getElementsByTagName("li")
			var picH = 20; //移动高度
			var scrollstep = 3; //移动步幅,越大越快
			var scrolltime = 20; //移动频度(毫秒)越大越慢
			var stoptime = 3000; //间断时间(毫秒)
			var tmpH = 0;
			Mar.innerHTML += Mar.innerHTML;

			function start() {
				if (tmpH < picH) {
					tmpH += scrollstep;
					if (tmpH > picH) tmpH = picH;
					Mar.scrollTop = tmpH;
					setTimeout(start, scrolltime);
				} else {
					tmpH = 0;
					Mar.appendChild(child_div[0]);
					Mar.scrollTop = 0;
					setTimeout(start, stoptime);
				}
			}
			onload = function() {
				setTimeout(start, stoptime)
			};
		</script>
	</body>
</html>

上方代码简单实现了多条信息，不间歇滚动，每条信息展示固定时间后继续滚动！


六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！