js+css实现表格无缝滚动

CSS部分

<style type="text/css">
	* {
		padding: 0;
		margin: 0;
		list-style: none;
	}
	
	.scroll-content {
		width: 500px;
		height: 300px;
		border: solid 1px #000;
		overflow: hidden;/*必要样式*/
	}
	
	.scroll-content .child {
		position: relative;/*必要样式*/
		top: 0px;/*必要样式*/
		left: 0px;/*必要样式*/
	}
	
	.scroll-content .child li {
		height: 60px;
		line-height: 60px;
		text-align: center;
		border-bottom: solid 1px #000;
		transition: all 0.3s ease-out;/*必要样式*/
	}
	
	.scroll-content .child li:nth-child(odd) {
		background: #B4F59D;
	}
	
	.scroll-content .child li:nth-child(even) {
		background: #FCFFA2;
	}
</style>

body部分

<div class="scroll-content"></div>

JavaScript部分

<script src="resource/js/jquery-2.1.0.js"></script>
<script type="text/javascript">
	var taskArr = [
		'任务1：XXXXXXXXXX',
		'任务2：XXXXXXXXXX',
		'任务3：XXXXXXXXXX',
		'任务4：XXXXXXXXXX',
		'任务5：XXXXXXXXXX',
		'任务6：XXXXXXXXXX'
	];

	var taskStr = '<ul class="child">';
	for(let i = 0; i < taskArr.length; i++) {
		taskStr += '<li>' + taskArr[i] + '</li>';
	}
	taskStr += '</ul>';
	$('.scroll-content').html(taskStr);

	scrollUp();

	function scrollUp() {
		var child = $('.child');
		var timer = setInterval(() => {
			var firstLi = $('.child li:first-child');
			firstLi.css.opacity = 0;
			child.css({
				transition: 'all 0.5s ease-out',
				top: -60 + 'px'
			});
			setTimeout(() => {
				firstLi.removeAttr('style');
				child.append(firstLi);
				child.css({
					transition: '',
					top: 0
				});
			}, 500)
		}, 2000)
	};
</script>