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

})

其他

自己做的小商城，开发技术使用的 SpringCloud + Nacos + 支付宝支付 + Vue

感兴趣的可以相互讨论技术！

传送门：https://store.ityao.cn/

顺便说一下，国内又一款开源软件Wall，搭建特别简单，可以搭建个人照片墙和视频墙，有兴趣可以看下教程：https://blog.csdn.net/u014641168/article/details/129396364