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

tongyao

发布于 2022-06-09 15:01:20

7.3K0

发布于 2022-06-09 15:01:20

文章被收录于专栏：tongyao

背景

因为公司系统需要实现横向文字滚动效果，所以自己手动写了一个，没用网上的，感觉网上的啰嗦繁琐，扩展性还不行，喜欢的话点赞收藏吧，下面是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);
})

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021年1月31日，如有侵权请联系 cloudcommunity@tencent.com 删除

css