使用js实现横向文字重复滚动,超简单

背景

因为公司系统需要实现横向文字滚动效果,所以自己手动写了一个,没用网上的,感觉网上的啰嗦繁琐,扩展性还不行,喜欢的话点赞收藏吧,下面是gif效果图。

效果

代码

html代码

<span id="wai">
	<p id="text">
		早上好,您有0条公告信息未读,请您及时查看!!!
	</p>
</span>

css代码,大家可以自行美化。

#wai{
	width: 350px; //宽度可以修改
	border: 1px red solid; //看你的项目需求,需不需要加边框
	color: white; //文本颜色
	float: left; //左右浮动,可以修改
	display: inline-block; //不可修改
	height: 20px; //不可修改
	overflow: hidden; //不可修改
	margin-top: 2px; //上边框
	margin-left: 250px; //左边距
}
#text{
	margin-left: 330px; //调整文字首次加载隐藏值,这里数值大小取决于一开始文字滚动等待的时长
	width:360px;  //根据你的文字长度定义长度,这里定义好之后,基本js代码就不用动了
}

js代码,上面修改好之后,基本不用动。

$(function (){
	$("#state").html(getTimeState())
	$("#num").html(h.data[0].NUM)
	var initWidth = parseInt($("#text").css('margin-left'));
	var stopWidth = "-"+$("#text").width();
	var width = parseInt($("#text").css('margin-left'));
	setInterval(function () {
		if(width == parseInt(stopWidth)){
			width = initWidth;
		}
		width = width-1;
		$("#text").css("margin-left",width)
	}, 30);
})

 

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注