JS 企业公告跑马灯：解决 CSS 动画交互痛点
官网顶部公告栏是常见组件，虽然 CSS animation 可实现基础跑马灯，但难以处理鼠标悬浮暂停、初始停留等复杂交互。本文分享一套基于 JavaScript 的跑马灯方案，精准解决以下核心痛点：
- 图标固定：左侧喇叭图标保持静止，不随文字滚动。
- 智能延时：页面加载后完整展示公告文字，停留 5 秒后自动向左滚动。
- 柔和渐变：文字滑出右侧时呈现模糊渐变效果，避免生硬切割感。
- 交互暂停：鼠标悬浮时文字自动暂停，移开后继续滚动。
- 兼容性强：采用 transform 位移，规避 flex、iframe 及低代码环境下 offsetLeft 取值错乱导致的文字消失 BUG。
- 无缝循环：文字完全滑出左侧后，自动从右侧重新滑入，实现无限循环。
效果与代码实现
以下是完整的 HTML、CSS 及 JS 代码示例，可直接复制使用：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS 企业公告跑马灯｜修复开头文字模糊</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;}
.marquee-wrap{
width:100%;
height:40px;
line-height:40px;
background:#fff2e8;
display:flex;
align-items:center;
overflow:hidden;
}
/* 左侧喇叭，固定不动，不受蒙版影响 */
.marquee-icon{
flex-shrink:0;
padding:0 12px;
color:#d4380d;
font-size:16px;
}
.marquee-outer{
flex:1;
overflow:hidden;
/* 修复：左侧完全不透明，只做右侧渐变模糊，解决开头文字被虚化 */
-webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 25px), transparent 100%);
mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 25px), transparent 100%);
-webkit-mask-size:100% 100%;
mask-size:100% 100%;
}
.marquee-text{
display:inline-block;
white-space:nowrap;
font-size:14px;
color:#d4380d;
}
</style>
</head>
<body>
<div class="marquee-wrap">
<div class="marquee-icon">📢</div>
<div class="marquee-outer" id="outer">
<div class="marquee-text" id="txt">企业通知：服务器例行维护，部分功能临时受限，有问题请联系客服！欢迎新老客户咨询业务合作</div>
</div>
</div>
<script>
const txt = document.getElementById('txt');
const outer = document.getElementById('outer');
let speed = 2;
let offsetX = 0;
let timer = null;
function move(){
offsetX -= speed;
if(offsetX < -txt.offsetWidth){
offsetX = outer.offsetWidth;
}
txt.style.transform = `translateX(${offsetX}px)`;
}
//初始静止停留 5 秒后启动滚动
setTimeout(()=>{
timer = setInterval(move,30);
},5000);
//鼠标悬浮暂停
txt.onmouseover = ()=> clearInterval(timer);
//鼠标离开继续滚动
txt.onmouseout = ()=> timer = setInterval(move,30);
</script>
</body>
</html>参数快速配置指南
开发者可根据实际需求调整以下关键参数：
- 初始停留时间：代码中的
5000代表毫秒数，可修改为3000（3 秒）或8000（8 秒）等。 - 滚动速度：变量
speed = 2控制速度，数值越大滚动越快。 - 模糊渐变范围：CSS 中
calc(100% - 25px)的25px决定右侧模糊区域的宽度，可按需调整。 - 内容动态化：模板项目中只需替换
marquee-text内部的文本，后端可直接输出公告变量。
#前端开发 #JS 实战 #HTML 代码 #跑马灯组件 #企业公告