<p class="ds-markdown-paragraph" style="margin-top: 13.716px; margin-bottom: 13.716px; font-size: 16.002px; line-height: 28.575px; color: rgb(64, 64, 64); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Oxygen, "Open Sans", sans-serif; text-wrap-mode: wrap; background-color: rgb(255, 255, 255);"><span style="font-weight: 600;">引言</span><br/>在网页设计中，滚动文字（跑马灯）效果常用于展示公告、新闻标题或促销信息。手动实现滚动逻辑需处理兼容性和性能问题，而 <span style="font-weight: 600;">jQuery.Marquee</span> 插件只需几行代码即可实现平滑、可定制的滚动效果。本文将深入介绍其使用方法和实战技巧。</p><hr style="height: 1px; margin: 32px 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(229, 229, 229); border: none; color: rgb(64, 64, 64); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Oxygen, "Open Sans", sans-serif; font-size: 16.002px; text-wrap-mode: wrap;"/><h3 style="font-size: 18.288px; line-height: 1.5; margin: 18.288px 0px 13.716px; color: rgb(64, 64, 64); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Oxygen, "Open Sans", sans-serif; text-wrap-mode: wrap; background-color: rgb(255, 255, 255);">一、插件特点</h3><ol style="margin-top: 13.716px; margin-bottom: 13.716px; padding-left: 27.432px; color: rgb(64, 64, 64); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Oxygen, "Open Sans", sans-serif; font-size: 16.002px; text-wrap-mode: wrap; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p class="ds-markdown-paragraph" style="margin-top: 0px; line-height: 28.575px; margin-bottom: 0px !important;"><span style="font-weight: 600;">轻量易用</span>：仅需jQuery + 一个插件文件（约4KB）。</p></li><li><p class="ds-markdown-paragraph" style="margin-top: 0px; line-height: 28.575px; margin-bottom: 0px !important;"><span style="font-weight: 600;">高度可定制</span>：支持速度、方向、延迟、循环等参数。</p></li><li><p class="ds-markdown-paragraph" style="margin-top: 0px; line-height: 28.575px; margin-bottom: 0px !important;"><span style="font-weight: 600;">响应式</span>：自适应容器宽度，兼容移动端。</p></li><li><p class="ds-markdown-paragraph" style="margin-top: 0px; line-height: 28.575px; margin-bottom: 0px !important;"><span style="font-weight: 600;">丰富事件</span>：提供<code style="font-size: 0.875em; font-weight: 600; font-family: Menlo, "Roboto Mono", "Courier New", Courier, monospace, Inter, sans-serif; background-color: rgb(236, 236, 236); border-radius: 4px; padding: 0.15rem 0.3rem;">beforeStarting</code>、<code style="font-size: 0.875em; font-weight: 600; font-family: Menlo, "Roboto Mono", "Courier New", Courier, monospace, Inter, sans-serif; background-color: rgb(236, 236, 236); border-radius: 4px; padding: 0.15rem 0.3rem;">finished</code>等回调函数。</p></li></ol><hr style="height: 1px; margin: 32px 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(229, 229, 229); border: none; color: rgb(64, 64, 64); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Oxygen, "Open Sans", sans-serif; font-size: 16.002px; text-wrap-mode: wrap;"/><h3 style="font-size: 18.288px; line-height: 1.5; margin: 18.288px 0px 13.716px; color: rgb(64, 64, 64); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Oxygen, "Open Sans", sans-serif; text-wrap-mode: wrap; background-color: rgb(255, 255, 255);">二、快速上手</h3><h4 style="font-size: 16.002px; line-height: 28.575px; margin: 18.288px 0px 13.716px; color: rgb(64, 64, 64); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Oxygen, "Open Sans", sans-serif; text-wrap-mode: wrap; background-color: rgb(255, 255, 255);">1. 引入依赖</h4><pre class="brush:html;toolbar:false"><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="jquery.marquee.min.js"></script></pre><h4 style="font-size: 16.002px; line-height: 28.575px; margin: 18.288px 0px 13.716px; color: rgb(64, 64, 64); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Oxygen, "Open Sans", sans-serif; text-wrap-mode: wrap; background-color: rgb(255, 255, 255);">2. HTML结构</h4><pre class="brush:html;toolbar:false"><div class="marquee">
这是需要滚动的文本内容，可以是任意HTML元素！</div></pre><h4 style="font-size: 16.002px; line-height: 28.575px; margin: 18.288px 0px 13.716px; color: rgb(64, 64, 64); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Oxygen, "Open Sans", sans-serif; text-wrap-mode: wrap; background-color: rgb(255, 255, 255);">3. 初始化插件</h4><pre class="brush:html;toolbar:false">$('.marquee').marquee({
duration: 5000, // 滚动时长（ms）
direction: 'left', // 方向：left/right/up/down
delayBeforeStart: 0, // 开始前的延迟
duplicated: true, // 是否复制内容以实现无缝滚动
pauseOnHover: true // 悬停暂停});</pre><hr style="height: 1px; margin: 32px 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(229, 229, 229); border: none; color: rgb(64, 64, 64); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Oxygen, "Open Sans", sans-serif; font-size: 16.002px; text-wrap-mode: wrap;"/><h3 style="font-size: 18.288px; line-height: 1.5; margin: 18.288px 0px 13.716px; color: rgb(64, 64, 64); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Oxygen, "Open Sans", sans-serif; text-wrap-mode: wrap; background-color: rgb(255, 255, 255);">三、关键配置项详解</h3><div class="markdown-table-wrapper" style="overflow-x: auto; color: rgb(64, 64, 64); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Oxygen, "Open Sans", sans-serif; font-size: 16.002px; text-wrap-mode: wrap; background-color: rgb(255, 255, 255);"><table width="NaN"><thead><tr class="firstRow"><th style="padding-top: 10px; padding-bottom: 10px; padding-left: 0px; border-bottom-width: 0.909091px; border-bottom-color: rgb(187, 187, 187); border-top: none; font-size: 15px; line-height: 1.72; border-right-color: rgb(187, 187, 187); border-left-color: rgb(187, 187, 187); text-align: left;">参数</th><th style="padding-top: 10px; padding-bottom: 10px; border-bottom-width: 0.909091px; border-bottom-color: rgb(187, 187, 187); border-top: none; font-size: 15px; line-height: 1.72; border-right-color: rgb(187, 187, 187); border-left-color: rgb(187, 187, 187); text-align: left;">类型</th><th style="padding-top: 10px; padding-bottom: 10px; border-bottom-width: 0.909091px; border-bottom-color: rgb(187, 187, 187); border-top: none; font-size: 15px; line-height: 1.72; border-right-color: rgb(187, 187, 187); border-left-color: rgb(187, 187, 187); text-align: left;">默认值</th><th style="padding-top: 10px; padding-bottom: 10px; border-bottom-width: 0.909091px; border-bottom-color: rgb(187, 187, 187); border-top: none; font-size: 15px; line-height: 1.72; border-right-color: rgb(187, 187, 187); border-left-color: rgb(187, 187, 187); text-align: left;">说明</th></tr></thead><tbody><tr><td style="padding-top: 10px; padding-bottom: 10px; padding-left: 0px; border-bottom-width: 0.909091px; border-color: rgb(229, 229, 229); font-size: 15px; line-height: 1.72; min-width: 100px; max-width: max(30vw, 320px);"><code style="font-size: 0.875em; font-weight: 600; font-family: Menlo, "Roboto Mono", "Courier New", Courier, monospace, Inter, sans-serif; background-color: rgb(236, 236, 236); border-radius: 4px; padding: 0.15rem 0.3rem;">duration</code></td><td style="padding-top: 10px; padding-bottom: 10px; border-bottom-width: 0.909091px; border-color: rgb(229, 229, 229); font-size: 15px; line-height: 1.72; min-width: 100px; max-width: max(30vw, 320px);">number</td><td style="padding-top: 10px; padding-bottom: 10px; border-bottom-width: 0.909091px; border-color: rgb(229, 229, 229); font-size: 15px; line-height: 1.72; min-width: 100px; max-width: max(30vw, 320px);">5000</td><td style="padding-top: 10px; padding-bottom: 10px; border-bottom-width: 0.909091px; border-color: rgb(229, 229, 229); font-size: 15px; line-height: 1.72; min-width: 100px; max-width: max(30vw, 320px);">动画持续时间（值越大速度越慢）</td></tr><tr><td style="padding-top: 10px; padding-bottom: 10px; padding-left: 0px; border-bottom-width: 0.909091px; border-color: rgb(229, 229, 229); font-size: 15px; line-height: 1.72; min-width: 100px; max-width: max(30vw, 320px);"><code style="font-size: 0.875em; font-weight: 600; font-family: Menlo, "Roboto Mono", "Courier New", Courier, monospace, Inter, sans-serif; background-color: rgb(236, 236, 236); border-radius: 4px; padding: 0.15rem 0.3rem;">gap</code></td><td style="padding-top: 10px; padding-bottom: 10px; border-bottom-width: 0.909091px; border-color: rgb(229, 229, 229); font-size: 15px; line-height: 1.72; min-width: 100px; max-width: max(30vw, 320px);">number</td><td style="padding-top: 10px; padding-bottom: 10px; border-bottom-width: 0.909091px; border-color: rgb(229, 229, 229); font-size: 15px; line-height: 1.72; min-width: 100px; max-width: max(30vw, 320px);">20</td><td style="padding-top: 10px; padding-bottom: 10px; border-bottom-width: 0.909091px; border-color: rgb(229, 229, 229); font-size: 15px; line-height: 1.72; min-width: 100px; max-width: max(30vw, 320px);">文本之间的间隔（像素）</td></tr><tr><td style="padding-top: 10px; padding-bottom: 10px; padding-left: 0px; border-bottom-width: 0.909091px; border-color: rgb(229, 229, 229); font-size: 15px; line-height: 1.72; min-width: 100px; max-width: max(30vw, 320px);"><code style="font-size: 0.875em; font-weight: 600; font-family: Menlo, "Roboto Mono", "Courier New", Courier, monospace, Inter, sans-serif; background-color: rgb(236, 236, 236); border-radius: 4px; padding: 0.15rem 0.3rem;">duplicated</code></td><td style="padding-top: 10px; padding-bottom: 10px; border-bottom-width: 0.909091px; border-color: rgb(229, 229, 229); font-size: 15px; line-height: 1.72; min-width: 100px; max-width: max(30vw, 320px);">boolean</td><td style="padding-top: 10px; padding-bottom: 10px; border-bottom-width: 0.909091px; border-color: rgb(229, 229, 229); font-size: 15px; line-height: 1.72; min-width: 100px; max-width: max(30vw, 320px);">false</td><td style="padding-top: 10px; padding-bottom: 10px; border-bottom-width: 0.909091px; border-color: rgb(229, 229, 229); font-size: 15px; line-height: 1.72; min-width: 100px; max-width: max(30vw, 320px);">复制内容保证无缝滚动</td></tr><tr><td style="padding-top: 10px; padding-bottom: 10px; padding-left: 0px; border-bottom-width: 0.909091px; border-color: rgb(229, 229, 229); font-size: 15px; line-height: 1.72; min-width: 100px; max-width: max(30vw, 320px);"><code style="font-size: 0.875em; font-weight: 600; font-family: Menlo, "Roboto Mono", "Courier New", Courier, monospace, Inter, sans-serif; background-color: rgb(236, 236, 236); border-radius: 4px; padding: 0.15rem 0.3rem;">startVisible</code></td><td style="padding-top: 10px; padding-bottom: 10px; border-bottom-width: 0.909091px; border-color: rgb(229, 229, 229); font-size: 15px; line-height: 1.72; min-width: 100px; max-width: max(30vw, 320px);">boolean</td><td style="padding-top: 10px; padding-bottom: 10px; border-bottom-width: 0.909091px; border-color: rgb(229, 229, 229); font-size: 15px; line-height: 1.72; min-width: 100px; max-width: max(30vw, 320px);">false</td><td style="padding-top: 10px; padding-bottom: 10px; border-bottom-width: 0.909091px; border-color: rgb(229, 229, 229); font-size: 15px; line-height: 1.72; min-width: 100px; max-width: max(30vw, 320px);">初始是否完整显示内容</td></tr><tr><td style="padding-top: 10px; padding-bottom: 10px; padding-left: 0px; border-bottom-width: 0.909091px; border-color: rgb(229, 229, 229); font-size: 15px; line-height: 1.72; min-width: 100px; max-width: max(30vw, 320px);"><code style="font-size: 0.875em; font-weight: 600; font-family: Menlo, "Roboto Mono", "Courier New", Courier, monospace, Inter, sans-serif; background-color: rgb(236, 236, 236); border-radius: 4px; padding: 0.15rem 0.3rem;">pauseOnHover</code></td><td style="padding-top: 10px; padding-bottom: 10px; border-bottom-width: 0.909091px; border-color: rgb(229, 229, 229); font-size: 15px; line-height: 1.72; min-width: 100px; max-width: max(30vw, 320px);">boolean</td><td style="padding-top: 10px; padding-bottom: 10px; border-bottom-width: 0.909091px; border-color: rgb(229, 229, 229); font-size: 15px; line-height: 1.72; min-width: 100px; max-width: max(30vw, 320px);">false</td><td style="padding-top: 10px; padding-bottom: 10px; border-bottom-width: 0.909091px; border-color: rgb(229, 229, 229); font-size: 15px; line-height: 1.72; min-width: 100px; max-width: max(30vw, 320px);">鼠标悬停暂停滚动</td></tr></tbody></table></div><hr style="height: 1px; margin: 32px 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(229, 229, 229); border: none; color: rgb(64, 64, 64); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Oxygen, "Open Sans", sans-serif; font-size: 16.002px; text-wrap-mode: wrap;"/><h3 style="font-size: 18.288px; line-height: 1.5; margin: 18.288px 0px 13.716px; color: rgb(64, 64, 64); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Oxygen, "Open Sans", sans-serif; text-wrap-mode: wrap; background-color: rgb(255, 255, 255);">四、进阶用法</h3><h4 style="font-size: 16.002px; line-height: 28.575px; margin: 18.288px 0px 13.716px; color: rgb(64, 64, 64); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Oxygen, "Open Sans", sans-serif; text-wrap-mode: wrap; background-color: rgb(255, 255, 255);">1. 动态更新内容</h4><pre class="brush:js;toolbar:false">// 更新文本并重新启动滚动$('.marquee')
.html('新内容...')
.marquee('destroy') // 销毁旧实例
.marquee({ duration: 3000 }); // 重新初始化</pre><h4 style="font-size: 16.002px; line-height: 28.575px; margin: 18.288px 0px 13.716px; color: rgb(64, 64, 64); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Oxygen, "Open Sans", sans-serif; text-wrap-mode: wrap; background-color: rgb(255, 255, 255);">2. 事件监听示例</h4><pre class="brush:js;toolbar:false">$('.marquee').marquee({
beforeStarting: function() {
console.log('动画即将开始！');
},
finished: function() {
console.log('循环完成一次！');
}});</pre><h4 style="font-size: 16.002px; line-height: 28.575px; margin: 18.288px 0px 13.716px; color: rgb(64, 64, 64); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Oxygen, "Open Sans", sans-serif; text-wrap-mode: wrap; background-color: rgb(255, 255, 255);">3. 垂直滚动效果</h4><pre class="brush:js;toolbar:false">$('.marquee').marquee({
direction: 'up', // 向上滚动
duration: 3000,
height: 50 // 容器固定高度});</pre><hr style="height: 1px; margin: 32px 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(229, 229, 229); border: none; color: rgb(64, 64, 64); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Oxygen, "Open Sans", sans-serif; font-size: 16.002px; text-wrap-mode: wrap;"/><h3 style="font-size: 18.288px; line-height: 1.5; margin: 18.288px 0px 13.716px; color: rgb(64, 64, 64); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Oxygen, "Open Sans", sans-serif; text-wrap-mode: wrap; background-color: rgb(255, 255, 255);">五、常见问题解决</h3><p class="ds-markdown-paragraph" style="margin-top: 0px; line-height: 28.575px; margin-bottom: 0px !important;"><span style="font-weight: 600;">无法无缝滚动</span>：<br/>开启 <code style="font-size: 0.875em; font-weight: 600; font-family: Menlo, "Roboto Mono", "Courier New", Courier, monospace, Inter, sans-serif; background-color: rgb(236, 236, 236); border-radius: 4px; padding: 0.15rem 0.3rem;">duplicated: true</code> 并确保容器宽度足够。</p><p class="ds-markdown-paragraph" style="margin-top: 0px; line-height: 28.575px; margin-bottom: 0px !important;"><span style="font-weight: 600;">滚动速度不稳定</span>：<br/>调整 <code style="font-size: 0.875em; font-weight: 600; font-family: Menlo, "Roboto Mono", "Courier New", Courier, monospace, Inter, sans-serif; background-color: rgb(236, 236, 236); border-radius: 4px; padding: 0.15rem 0.3rem;">duration</code> 值（值越大越慢），避免使用<code style="font-size: 0.875em; font-weight: 600; font-family: Menlo, "Roboto Mono", "Courier New", Courier, monospace, Inter, sans-serif; background-color: rgb(236, 236, 236); border-radius: 4px; padding: 0.15rem 0.3rem;">delayBeforeStart</code>。</p><p class="ds-markdown-paragraph" style="margin-top: 0px; margin-bottom: 4px; line-height: 28.575px;"><span style="font-weight: 600;">移动端卡顿</span>：<br/>减少同时滚动的元素数量，或用CSS3硬件加速：</p><pre class="brush:css;toolbar:false">.marquee {
transform: translate3d(0,0,0); }</pre><hr style="height: 1px; margin: 32px 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(229, 229, 229); border: none; color: rgb(64, 64, 64); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Oxygen, "Open Sans", sans-serif; font-size: 16.002px; text-wrap-mode: wrap;"/><h3 style="font-size: 18.288px; line-height: 1.5; margin: 18.288px 0px 13.716px; color: rgb(64, 64, 64); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Oxygen, "Open Sans", sans-serif; text-wrap-mode: wrap; background-color: rgb(255, 255, 255);">六、完整示例</h3><pre class="brush:html;toolbar:false"><!DOCTYPE html><html><head>
<title>jQuery.Marquee示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.marquee@1.6.0/jquery.marquee.min.js"></script>
<style>
.marquee {
width: 100%;
overflow: hidden;
background: #f0f0f0;
padding: 10px;
}
</style></head><body>
<div class="marquee">
<span>? 限时优惠：前端框架课程7折特惠！ </span>
</div>
<script>
$(document).ready(function() {
$('.marquee').marquee({
duration: 8000,
duplicated: true,
pauseOnHover: true
});
});
</script></body></html></pre><hr style="height: 1px; margin: 32px 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(229, 229, 229); border: none; color: rgb(64, 64, 64); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Oxygen, "Open Sans", sans-serif; font-size: 16.002px; text-wrap-mode: wrap;"/><h3 style="font-size: 18.288px; line-height: 1.5; margin: 18.288px 0px 13.716px; color: rgb(64, 64, 64); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Oxygen, "Open Sans", sans-serif; text-wrap-mode: wrap; background-color: rgb(255, 255, 255);">结语</h3><p class="ds-markdown-paragraph" style="margin-top: 13.716px; margin-bottom: 13.716px; font-size: 16.002px; line-height: 28.575px; color: rgb(64, 64, 64); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Oxygen, "Open Sans", sans-serif; text-wrap-mode: wrap; background-color: rgb(255, 255, 255);">jQuery.Marquee以极简的配置解决了滚动效果的开发痛点，尤其适合公告栏、实时资讯等场景。虽然现代CSS3（如<code style="font-size: 0.875em; font-weight: 600; font-family: Menlo, "Roboto Mono", "Courier New", Courier, monospace, Inter, sans-serif; background-color: rgb(236, 236, 236); border-radius: 4px; padding: 0.15rem 0.3rem;">@keyframes</code>）也能实现类似效果，但该插件在兼容性和动态控制上仍有优势。</p><p class="ds-markdown-paragraph" style="margin-top: 13.716px; margin-bottom: 13.716px; font-size: 16.002px; line-height: 28.575px; color: rgb(64, 64, 64); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Oxygen, "Open Sans", sans-serif; text-wrap-mode: wrap; background-color: rgb(255, 255, 255);"><span style="font-weight: 600;">资源推荐</span>：</p><ul style="margin-top: 13.716px; margin-bottom: 13.716px; padding-left: 27.432px; color: rgb(64, 64, 64); font-family: quote-cjk-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Oxygen, "Open Sans", sans-serif; font-size: 16.002px; text-wrap-mode: wrap; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p class="ds-markdown-paragraph" style="margin-top: 0px; line-height: 28.575px; margin-bottom: 0px !important;"><a href="https://github.com/aamirafridi/jQuery.Marquee" target="_blank" style="color: rgb(59, 130, 246); transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 6.858px; border-width: 1.81818px 2.72727px; border-style: solid; border-color: rgba(255, 255, 255, 0); margin-left: -3px; margin-right: -3px; text-decoration-line: none; position: relative;">GitHub源码</a></p></li><li><p class="ds-markdown-paragraph" style="margin-top: 0px; line-height: 28.575px; margin-bottom: 0px !important;"><a href="https://github.com/aamirafridi/jQuery.Marquee/blob/master/README.md" target="_blank" style="color: rgb(59, 130, 246); transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 6.858px; border-width: 1.81818px 2.72727px; border-style: solid; border-color: rgba(255, 255, 255, 0); margin-left: -3px; margin-right: -3px; text-decoration-line: none; position: relative;">配置文档</a></p></li></ul><p><br/></p>
相关文章
