轻松实现滚动效果：jQuery.Marquee插件详解_前端技术_我的小家_八零在线_符号象

引言
在网页设计中，滚动文字（跑马灯）效果常用于展示公告、新闻标题或促销信息。手动实现滚动逻辑需处理兼容性和性能问题，而 jQuery.Marquee 插件只需几行代码即可实现平滑、可定制的滚动效果。本文将深入介绍其使用方法和实战技巧。

一、插件特点

轻量易用：仅需jQuery + 一个插件文件（约4KB）。
高度可定制：支持速度、方向、延迟、循环等参数。
响应式：自适应容器宽度，兼容移动端。
丰富事件：提供beforeStarting、finished等回调函数。

二、快速上手

1. 引入依赖

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="jquery.marquee.min.js"></script>

2. HTML结构

<div class="marquee">
  这是需要滚动的文本内容，可以是任意HTML元素！</div>

3. 初始化插件

$('.marquee').marquee({
  duration: 5000,    // 滚动时长（ms）
  direction: 'left', // 方向：left/right/up/down
  delayBeforeStart: 0, // 开始前的延迟
  duplicated: true,   // 是否复制内容以实现无缝滚动
  pauseOnHover: true  // 悬停暂停});

三、关键配置项详解

参数	类型	默认值	说明
`duration`	number	5000	动画持续时间（值越大速度越慢）
`gap`	number	20	文本之间的间隔（像素）
`duplicated`	boolean	false	复制内容保证无缝滚动
`startVisible`	boolean	false	初始是否完整显示内容
`pauseOnHover`	boolean	false	鼠标悬停暂停滚动

四、进阶用法

1. 动态更新内容

// 更新文本并重新启动滚动$('.marquee')
  .html('新内容...')
  .marquee('destroy') // 销毁旧实例
  .marquee({ duration: 3000 }); // 重新初始化

2. 事件监听示例

$('.marquee').marquee({
  beforeStarting: function() {
    console.log('动画即将开始！');
  },
  finished: function() {
    console.log('循环完成一次！');
  }});

3. 垂直滚动效果

$('.marquee').marquee({
  direction: 'up',    // 向上滚动
  duration: 3000,
  height: 50          // 容器固定高度});

五、常见问题解决

无法无缝滚动：
开启 duplicated: true 并确保容器宽度足够。

滚动速度不稳定：
调整 duration 值（值越大越慢），避免使用delayBeforeStart。

移动端卡顿：
减少同时滚动的元素数量，或用CSS3硬件加速：

.marquee { 
  transform: translate3d(0,0,0); }

六、完整示例

<!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>

结语

jQuery.Marquee以极简的配置解决了滚动效果的开发痛点，尤其适合公告栏、实时资讯等场景。虽然现代CSS3（如@keyframes）也能实现类似效果，但该插件在兼容性和动态控制上仍有优势。

资源推荐：