如何实现响应式 jQuery Marquee：移动端初始化，桌面端销毁-js教程-PHP中文网

如何实现响应式 jQuery Marquee：移动端初始化，桌面端销毁

聖光之護

发布： 2025-10-20 12:49:02

原创

164人浏览过

如何实现响应式 jquery marquee：移动端初始化，桌面端销毁

本教程详细介绍了如何使用 jQuery.Marquee 插件实现响应式滚动效果，确保其在移动设备上初始化并在桌面设备上销毁。文章阐述了传统方法中可能遇到的问题，并提供了一种健壮的解决方案，利用 `window.matchMedia` 进行媒体查询以及 `data-*` 属性进行插件状态管理，从而避免重复初始化和销毁，优化性能并提升用户体验。

在现代网页设计中，响应式布局是不可或缺的一部分。对于一些特定的UI组件，如跑马灯（Marquee）效果，我们可能希望它们只在特定的屏幕尺寸下激活，例如在移动设备上启用，而在桌面设备上禁用。本教程将指导您如何使用 jQuery.Marquee 插件实现这一功能，并提供一个健壮的解决方案来避免常见的陷阱。

响应式 Marquee 的挑战

直接监听 window 的 resize 事件并根据当前窗口宽度来初始化或销毁 Marquee 插件，可能会导致一些问题：

重复初始化/销毁： 如果不跟踪插件的状态，每次窗口大小跨越阈值时，都可能尝试对一个已经初始化过的元素再次初始化，或者对一个未初始化的元素进行销毁操作，这可能导致插件崩溃或不按预期工作。
性能问题： resize 事件会频繁触发。在每次事件中都进行复杂的DOM操作或插件初始化，会消耗大量资源，影响页面性能。
不准确的宽度判断： 在 resize 事件中直接获取 $(window).width() 可能会在某些情况下不够精确，尤其是在处理浏览器缩放或设备像素比时。

解决方案：matchMedia 与状态管理

为了解决上述挑战，我们将采用以下两种核心技术：

window.matchMedia()： 这是一个现代浏览器API，用于执行媒体查询。它比反复查询 $(window).width() 更高效，因为它只在媒体查询状态发生变化时才通知我们。
*`data-属性：** 我们将使用一个自定义的data-*属性（例如data-marqueeinit`）来跟踪 Marquee 插件是否已经在目标元素上初始化。这有助于防止重复操作。

实现步骤

1. 引入必要的库

首先，确保您的页面中已引入 jQuery 库和 jQuery.Marquee 插件。建议将它们放在 <body> 标签的末尾，或者使用 defer 属性加载脚本。

千面视频动捕

千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

查看详情

<!-- 引入 jQuery 库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入 jQuery.Marquee 插件 -->
<script src="https://cdn.jsdelivr.net/npm/jquery.marquee@1.6.0/jquery.marquee.min.js"></script>

登录后复制

2. HTML 结构

为您的 Marquee 内容准备一个容器元素。这里我们使用一个带有 tt-services-listing 类的 div 元素作为示例。

<div class="tt-services-listing">
  这是您希望滚动的文本内容。它会根据屏幕宽度在移动端滚动，在桌面端停止。
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

登录后复制

3. JavaScript 逻辑

核心逻辑将封装在一个函数中，该函数在页面加载时和窗口大小调整时被调用。

jQuery($ => { // 确保 DOM 加载完毕，并为 jQuery 提供 $ 别名

  // Marquee 插件的配置选项
  const marqueeOptions = {
    duration: 20000, // 滚动持续时间（毫秒）
    duplicated: true, // 是否复制内容以实现无缝滚动
    delayBeforeStart: 0, // 开始前的延迟时间
    startVisible: true, // 是否在开始时可见
  };

  // 目标 Marquee 元素
  const $listings = $('.tt-services-listing');

  // 使用 window.matchMedia 监听屏幕宽度小于 768px 的媒体查询
  // m768.matches 会返回当前是否匹配该媒体查询
  const m768 = matchMedia("(width < 768px)");

  /**
   * 处理 Marquee 插件的初始化和销毁逻辑
   */
  const handleMarquee = () => {
    // 检查当前是否匹配移动端宽度 (width < 768px) 并且 Marquee 尚未初始化
    if (m768.matches && !$listings.data("marqueeinit")) {
      // 设置 data-marqueeinit 标志为 1，表示已初始化
      $listings.data("marqueeinit", 1);
      // 初始化 Marquee 插件
      $listings.marquee(marqueeOptions);
    }
    // 检查当前是否不匹配移动端宽度 (width >= 768px) 并且 Marquee 已经初始化
    else if (!m768.matches && $listings.data("marqueeinit")) {
      // 移除 data-marqueeinit 标志，表示已销毁
      $listings.removeData("marqueeinit");
      // 销毁 Marquee 插件
      $listings.marquee("destroy");
    }
  };

  // 监听窗口的 resize 事件，并在事件触发时调用 handleMarquee 函数
  $(window).on("resize", handleMarquee);

  // 页面加载时立即执行一次 handleMarquee，以根据初始屏幕宽度设置 Marquee 状态
  handleMarquee();

});

登录后复制

代码解析

jQuery($ => { ... });: 这是一个常见的 jQuery 简写，确保在 DOM 完全加载后执行代码，并且 $符号在作用域内指向 jQuery。
marqueeOptions: 定义了 Marquee 插件的配置参数，您可以根据需要进行调整。
$listings: 缓存了 Marquee 目标元素的 jQuery 对象，避免重复查询。
matchMedia("(width < 768px)"): 创建一个 MediaQueryList 对象，用于监听 width < 768px 的媒体查询。m768.matches 属性会实时反映当前是否匹配这个媒体查询。
handleMarquee() 函数:
- 初始化条件: m768.matches 为 true（当前是移动端）且 !$listings.data("marqueeinit") 为 true（Marquee 尚未初始化）。满足这两个条件时，设置 data-marqueeinit 标志并初始化 Marquee。
- 销毁条件: !m768.matches 为 true（当前是桌面端）且 $listings.data("marqueeinit") 为 true（Marquee 已经初始化）。满足这两个条件时，移除 data-marqueeinit 标志并销毁 Marquee。
$(window).on("resize", handleMarquee);: 绑定 resize 事件监听器，每次窗口大小改变时都会调用 handleMarquee。
handleMarquee();: 在脚本加载时立即调用一次 handleMarquee，以确保在页面首次加载时 Marquee 状态正确。

注意事项与最佳实践

媒体查询阈值: 示例中使用 768px 作为移动端和桌面端的分界线，您可以根据您的设计需求调整这个值。
插件销毁: jquery.marquee 插件提供了 destroy 方法，这是一个很好的实践。不是所有 jQuery 插件都提供 destroy 方法，如果您的插件没有，您可能需要手动移除相关的类、样式或事件监听器。
性能优化: 虽然 matchMedia 已经比直接查询窗口宽度更高效，但对于 resize 事件，通常建议使用 节流 (throttle) 或 防抖 (debounce) 技术来限制 handleMarquee 函数的执行频率，进一步提升性能。例如，可以使用 Lodash 库中的 _.throttle() 方法。
初始化顺序: 确保 jQuery 库和 Marquee 插件在您的脚本之前加载。
离线测试: 在不同的设备和浏览器上测试您的实现，以确保其在各种条件下都能正常工作。

总结

通过结合 window.matchMedia 进行响应式媒体查询和 data-* 属性进行插件状态管理，我们可以优雅且高效地实现 jQuery.Marquee 插件在不同屏幕尺寸下的动态初始化和销毁。这种方法不仅解决了传统 resize 事件监听可能带来的性能和逻辑问题，也使得代码更加健壮和易于维护，为用户提供了更流畅、更符合预期的交互体验。

以上就是如何实现响应式 jQuery Marquee：移动端初始化，桌面端销毁的详细内容，更多请关注php中文网其它相关文章！