背景
因为公司系统需要实现横向文字滚动效果，所以自己手动写了一个，没用网上的，感觉网上的啰嗦繁琐，扩展性还不行，喜欢的话点赞收藏吧，下面是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
感兴趣的可以相互讨论技术！
顺便说一下，国内又一款开源软件Wall，搭建特别简单，可以搭建个人照片墙和视频墙，有兴趣可以看下教程：https://blog.csdn.net/u014641168/article/details/129396364
