本教程详细介绍了如何使用 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 属性加载脚本。
<!-- 引入 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 事件监听可能带来的性能和逻辑问题，也使得代码更加健壮和易于维护，为用户提供了更流畅、更符合预期的交互体验。
