<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文章跑马灯效果示例</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 50px;
font-family: "微软雅黑", sans-serif;
background: #f5f5f5;
}
/* 跑马灯容器：限定可视区域 */
.marquee-container {
width: 800px;
height: 500px; /* 可视高度 */
margin: 0 auto;
border: 1px solid #e0e0e0;
border-radius: 12px;
background: #fff;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
overflow: hidden; /* 隐藏超出部分 */
position: relative;
/* 硬件加速，提升滚动流畅度 */
transform: translateZ(0);
will-change: transform;
}
/* 滚动内容容器：包含原内容+复制内容，实现无缝 */
.marquee-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
/* 高度由内容决定，JS会自动计算 */
}
/* 文章内容样式 */
.article {
padding: 30px;
font-size: 16px;
line-height: 1.8;
color: #333;
}
.article h2 {
margin-bottom: 20px;
color: #222;
font-weight: 600;
}
.article p {
margin-bottom: 16px;
text-align: justify;
}
/* 滚动条样式（可选） */
.marquee-container::-webkit-scrollbar {
width: 4px;
}
.marquee-container::-webkit-scrollbar-track {
background: rgba(0,0,0,0.05);
border-radius: 2px;
}
.marquee-container::-webkit-scrollbar-thumb {
background: #0066cc;
border-radius: 2px;
}
</style>
</head>
<body>
<div class="marquee-container" id="marqueeContainer">
<div class="marquee-content" id="marqueeContent">
<!-- 原始文章内容 -->
<div class="article" id="originalArticle">
<h2>人工智能的发展与未来</h2>
<p>
人工智能（AI）是当前科技领域最具活力和潜力的方向之一，它旨在使计算机系统能够模拟、延伸和扩展人类的智能。从1956年达特茅斯会议首次提出“人工智能”概念至今，AI已经经历了从符号主义、连接主义到深度学习的多次技术浪潮，如今正进入规模化应用的新阶段。
</p>
<p>
深度学习作为AI的核心技术，通过构建多层神经网络模拟人脑的神经元连接方式，实现了对复杂数据的高效处理。图像识别、自然语言处理、语音交互等领域的突破，让AI从实验室走向了大众生活——智能手机的人脸解锁、智能音箱的语音助手、电商平台的个性化推荐，都是AI落地的典型场景。
</p>
<p>
工业领域，AI正在推动制造业向智能化转型。智能制造系统能够实时监控生产数据、预测设备故障、优化生产流程，大幅提升生产效率和产品质量。在物流行业，AI驱动的路径规划算法可以降低配送成本，无人仓储和无人配送技术也在逐步落地应用。
</p>
<p>
医疗健康领域，AI的应用同样令人期待。医学影像辅助诊断系统能够快速识别病灶，提高诊断效率和准确率；基于大数据的药物研发平台可以缩短新药研发周期，降低研发成本；个性化医疗方案则能根据患者的基因特征和健康数据，提供更精准的治疗建议。
</p>
<p>
然而，AI的快速发展也带来了一系列挑战。数据隐私与安全问题始终是AI应用的核心关注点，如何在利用数据训练模型的同时保护用户隐私，需要技术和法律的双重保障。就业结构的变化也是不可忽视的问题，部分重复性劳动岗位可能被AI替代，这要求社会加强职业技能培训，帮助劳动者适应新的就业环境。
</p>
<p>
伦理问题同样值得深思。AI决策的透明度、算法偏见的规避、自主智能系统的责任界定，都是需要行业和社会共同探讨的话题。建立完善的AI伦理框架和监管体系，才能确保AI技术朝着造福人类的方向发展。
</p>
<p>
未来，AI将朝着通用人工智能（AGI）的方向持续探索。通用人工智能具备与人类相当的学习、推理和适应能力，能够处理各类复杂任务，而非局限于特定领域。虽然当前距离AGI还有很长的路要走，但技术的持续突破正在不断拉近这一距离。
</p>
<p>
人机协同将成为未来AI应用的主流模式。AI擅长处理海量数据、快速计算和重复性工作，而人类则拥有创造力、情感理解和价值判断的优势，二者的结合将释放出更大的生产力。教育、科研、艺术等领域，人机协同将催生新的创作方式和研究范式。
</p>
<p>
从技术层面看，AI与物联网（IoT）、区块链、量子计算等技术的融合，将形成更强大的技术生态。物联网为AI提供海量的实时数据，区块链保障数据的可信性和安全性，量子计算则能大幅提升AI模型的训练效率，这些技术的协同发展将推动AI进入新的发展阶段。
</p>
<p>
总而言之，人工智能不仅是一场技术革命，更是一场深刻的社会变革。它正在重塑生产方式、生活方式和思维方式，也为人类社会的发展带来了新的机遇和挑战。以开放、包容、负责任的态度拥抱AI技术，才能充分发挥其潜力，推动人类社会向更智能、更美好的方向发展。
</p>
</div>
<!-- 复制的文章内容（JS自动生成，实现无缝） -->
<div id="cloneArticle"></div>
</div>
</div>
<script>
// 配置项（可根据需求调整）
const config = {
speed: 20, // 滚动速度（像素/秒，数值越小越慢）
pauseOnHover: true, // 鼠标悬停是否暂停
resumeDelay: 1000, // 手动滚动后恢复滚动的延迟（ms）
seamless: true // 是否开启无缝滚动
};
// 全局变量
let marqueeContainer = document.getElementById('marqueeContainer');
let marqueeContent = document.getElementById('marqueeContent');
let originalArticle = document.getElementById('originalArticle');
let cloneArticle = document.getElementById('cloneArticle');
let requestId = null; // 动画帧ID
let isPaused = false; // 是否暂停
let lastScrollTime = 0; // 最后一次手动滚动时间
let articleHeight = 0; // 单篇文章高度
let contentTop = 0; // 内容容器当前top值
// 初始化：复制内容+计算高度
function initMarquee() {
// 复制文章内容，实现无缝
if (config.seamless) {
cloneArticle.innerHTML = originalArticle.innerHTML;
cloneArticle.className = originalArticle.className;
}
// 计算关键高度
articleHeight = originalArticle.offsetHeight;
marqueeContent.style.height = config.seamless ? `${articleHeight * 2}px` : `${articleHeight}px`;
// 绑定事件
if (config.pauseOnHover) {
marqueeContainer.addEventListener('mouseenter', pauseMarquee);
marqueeContainer.addEventListener('mouseleave', resumeMarquee);
}
// 监听手动滚动，暂停后延迟恢复
marqueeContainer.addEventListener('scroll', () => {
lastScrollTime = Date.now();
pauseMarquee();
setTimeout(() => {
if (Date.now() - lastScrollTime >= config.resumeDelay) {
// 同步手动滚动的位置到内容容器
contentTop = -marqueeContainer.scrollTop;
resumeMarquee();
}
}, config.resumeDelay);
});
// 启动跑马灯
startMarquee();
}
// 启动跑马灯核心逻辑
function startMarquee() {
if (isPaused) return;
const now = performance.now();
// 计算每帧滚动的距离（基于帧率，保证匀速）
const distancePerFrame = config.speed / 60;
function animate() {
// 更新top值，实现向下滚动
contentTop -= distancePerFrame;
// 无缝滚动逻辑：滚动到复制内容顶部时，重置位置
if (config.seamless && Math.abs(contentTop) >= articleHeight) {
contentTop = 0;
}
// 非无缝逻辑：滚动到底部后回顶
else if (!config.seamless && Math.abs(contentTop) >= articleHeight - marqueeContainer.offsetHeight) {
contentTop = 0;
}
// 应用top值
marqueeContent.style.top = `${contentTop}px`;
// 手动滚动后，延迟恢复
if (Date.now() - lastScrollTime < config.resumeDelay) {
requestId = requestAnimationFrame(animate);
return;
}
// 继续动画
if (!isPaused) {
requestId = requestAnimationFrame(animate);
}
}
// 停止旧动画，启动新动画
cancelAnimationFrame(requestId);
requestId = requestAnimationFrame(animate);
}
// 暂停跑马灯
function pauseMarquee() {
isPaused = true;
cancelAnimationFrame(requestId);
}
// 恢复跑马灯
function resumeMarquee() {
isPaused = false;
startMarquee();
}
// 窗口大小变化时重新计算高度
window.addEventListener('resize', () => {
pauseMarquee();
articleHeight = originalArticle.offsetHeight;
marqueeContent.style.height = config.seamless ? `${articleHeight * 2}px` : `${articleHeight}px`;
resumeMarquee();
});
// 页面隐藏/显示时暂停/恢复
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
pauseMarquee();
} else {
resumeMarquee();
}
});
// 初始化
window.addEventListener('load', initMarquee);
</script>
</body>
</html>