新闻上滚动html

标题 新闻上滚动无缝连接切换-HTML

css样式##

/*新闻动态样式begin*/
.notice_active{
	float: left;
	width: 100%;
	height: 42px;
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
	white-space: nowrap;
	text-overflow: ellipsis;
	background-color: rgb(229,245,252);
	margin-top: 20px;
}
.notice_active>ul>li{
	line-height: 42px;
	display: flex;
	align-items: center;
	font-size: 16px;
}
.notice_active>ul>li>img{
	width: 0.4rem;
	margin-right: 0.2rem;
}
.tooLength{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: block;
}

html模板

<!--新闻动态begin-->
<div class="notice_active">
	<ul>
		<li v-for="item,index in informationDynamicsList">
			<span style="margin-left: 12px;width: 80px;">
				<a style="color:#00a0e9;" href="/information/infodynamics-list">资讯动态：</a>
			</span>
			<span style="width: 84px;color:#939393;" v-html="item.infoPublishTime"></span>
			<span style="margin:0 24px;width: 767px;">
				<a class="tooLength" target="_blank" :href="'/information/information-detail?infoId='+item.id" style="color: #4a4a4a;" v-html="item.title"></a>
			</span>
			<span style="float: right;text-align: right;">
				<a style="color:#00a0e9;text-decoration: underline;" href="/information/infodynamics-list">查看更多&gt;&gt;&gt;</a>
			</span>
		</li>
	</ul>
</div>
<!--新闻动态end-->

JS模块

//新闻动态上下滚动
//3.方法
function t() {
	var he = $(".notice_active>ul>li").height();//找到li高
	$(".notice_active>ul").animate({
			"marginTop": "-" + he
		}, 500, function () {
			$(".notice_active>ul").css({
				"marginTop": 0
			});
			//二选一
			//复制第一个到最后一个
			$(".notice_active>ul>li").eq(0).appendTo($(".notice_active>ul")); 					      	
			//复制第一个到最后一个(多个的情况)	
			$(".notice_active_two>ul>li:eq(0),.notice_active_two>ul>li:eq(1),.notice_active_two>ul>li:eq(2)").appendTo($(".notice_active_two>ul")); 		
	});
}

//4. 触发方法
//新闻动态
var time = setInterval(function () {
	t();
}, 5000)