本教程旨在解决jquery marquee插件在不同设备尺寸下响应式管理的问题。我们将学习如何利用`window.matchmedia`进行媒体查询，并结合数据属性（`data-*`）来精确控制插件的初始化与销毁，确保在窗口大小调整时，marquee效果能在移动端自动启用，在桌面端自动停用，从而避免性能问题和功能冲突。
引言：响应式插件管理的需求
在现代网页设计中，响应式布局已成为标准。许多JavaScript插件（如jQuery Marquee）在不同屏幕尺寸下的行为需要精确控制。例如，一个文本滚动效果可能只适用于移动设备，而在桌面端则希望它保持静态。简单地在resize事件中重复初始化或销毁插件，可能导致性能问题甚至页面崩溃，因为插件可能已被初始化或已被销毁。本教程将介绍一种健壮的方法，用于在特定屏幕宽度下动态地初始化和销毁jQuery Marquee插件。
jQuery Marquee 插件简介
jQuery.Marquee是一个轻量级的jQuery插件，用于创建水平或垂直滚动的文本或元素。它提供了多种配置选项，如滚动速度、方向、是否复制内容等。在我们的场景中，我们将关注其初始化和销毁方法。
核心问题：在resize事件中的陷阱
原始代码中遇到的问题，通常是由于以下原因：
- 重复初始化： 当窗口从桌面尺寸缩小到移动尺寸时，每次触发resize事件且宽度小于阈值时，都会尝试重新初始化Marquee。如果插件没有内部机制处理重复初始化，这可能导致错误或性能下降。
- 销毁未初始化的插件： 当窗口从移动尺寸放大到桌面尺寸时，如果插件之前未在移动尺寸下初始化，但尝试对其执行destroy操作，也可能导致错误。
- 状态管理缺失： 缺乏一种有效的方式来追踪插件当前是否已被初始化，导致上述问题。
解决方案：matchMedia与数据属性结合
为了解决上述问题，我们将采用以下策略：
- 使用 window.matchMedia() 进行媒体查询： 这是一个现代浏览器API，允许我们以编程方式匹配CSS媒体查询。它比直接获取$(window).width()更高效和语义化，并且可以监听媒体查询状态的变化。
- *利用 `data-属性追踪插件状态：** 在目标元素上设置一个自定义数据属性（例如data-marqueeinit`），来标记Marquee插件是否已被初始化。这提供了一种简单而有效的方式来管理元素级别的插件状态。
步骤详解
1. 准备工作
首先，确保你的项目中已引入jQuery库和jQuery.Marquee插件。
<div class="tt-services-listing"> Resize the window. Lorem ipsum dolor sit amet, consectetur Aliquid. </div> <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>
2. 定义媒体查询和目标元素
我们使用 matchMedia 定义一个针对宽度小于768px的媒体查询，并缓存目标jQuery元素和Marquee的配置选项。
// DOM ready 和 $ 别名在作用域内
jQuery($ => {
// 定义媒体查询，监听宽度小于768px的屏幕
const m768 = matchMedia("(width < 768px)");
// 缓存目标元素
const $listings = $('.tt-services-listing');
// 定义Marquee的配置选项
const marqueeOptions = {
duration: 20000,
duplicated: true,
delayBeforeStart: 0,
startVisible: true
};
// ... 后续代码
});3. 实现 handleMarquee 函数
这是核心逻辑所在。此函数将根据当前的媒体查询状态和插件的初始化状态来决定是初始化还是销毁Marquee。
const handleMarquee = () => {
// 检查是否为移动端 (宽度 < 768px) 且 Marquee 未初始化
if (m768.matches && !$listings.data("marqueeinit")) {
// 设置数据属性标记为已初始化
$listings.data("marqueeinit", 1);
// 初始化 Marquee
$listings.marquee(marqueeOptions);
}
// 检查是否为桌面端 (宽度 >= 768px) 且 Marquee 已初始化
else if (!m768.matches && $listings.data("marqueeinit")) {
// 移除数据属性标记
$listings.removeData("marqueeinit");
// 销毁 Marquee
$listings.marquee("destroy");
}
};- m768.matches：这是一个布尔值，如果当前屏幕宽度小于768px，则为true。
- $listings.data("marqueeinit")：用于检查目标元素上是否存在 data-marqueeinit 属性。如果存在且值为真，则表示Marquee已初始化。
- $listings.data("marqueeinit", 1)：设置 data-marqueeinit 属性，标记Marquee已初始化。
- $listings.removeData("marqueeinit")：移除 data-marqueeinit 属性，标记Marquee已销毁。
4. 绑定事件并首次调用
将 handleMarquee 函数绑定到 window 的 resize 事件上，并立即调用一次，以在页面加载时设置初始状态。
// 绑定 resize 事件，当窗口大小改变时调用 handleMarquee
$(window).on("resize", handleMarquee);
// 页面加载时立即调用一次，设置初始状态
handleMarquee();完整代码示例
将上述所有代码片段组合起来，形成一个完整的解决方案。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式jQuery Marquee</title>
<style>
body { font-family: sans-serif; margin: 20px; }
.tt-services-listing {
white-space: nowrap;
overflow: hidden;
border: 1px solid #ccc;
padding: 10px;
margin-top: 20px;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h1>响应式jQuery Marquee 示例</h1>
<p>请尝试调整浏览器窗口大小，观察 Marquee 效果在不同宽度下的行为。</p>
<div class="tt-services-listing">
这是一个需要滚动的示例文本。当窗口宽度小于768px时，它将开始滚动；当宽度大于或等于768px时，它将停止滚动并保持静态。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<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>
<script>
// DOM ready 和 $ 别名在作用域内
jQuery($ => {
// 定义媒体查询，监听宽度小于768px的屏幕
const m768 = matchMedia("(width < 768px)");
// 缓存目标元素
const $listings = $('.tt-services-listing');
// 定义Marquee的配置选项
const marqueeOptions = {
duration: 20000, // 滚动持续时间
duplicated: true, // 复制内容以实现无缝滚动
delayBeforeStart: 0, // 开始前的延迟
startVisible: true, // 初始时内容可见
};
// 处理 Marquee 初始化和销毁的函数
const handleMarquee = () => {
// 如果当前是移动端 (宽度 < 768px) 并且 Marquee 尚未初始化
if (m768.matches && !$listings.data("marqueeinit")) {
// 标记 Marquee 为已初始化
$listings.data("marqueeinit", 1);
// 初始化 Marquee 插件
$listings.marquee(marqueeOptions);
console.log("Marquee initialized for mobile.");
}
// 如果当前是桌面端 (宽度 >= 768px) 并且 Marquee 已经初始化
else if (!m768.matches && $listings.data("marqueeinit")) {
// 移除 Marquee 的初始化标记
$listings.removeData("marqueeinit");
// 销毁 Marquee 插件
$listings.marquee("destroy");
console.log("Marquee destroyed for desktop.");
}
};
// 绑定 resize 事件，当窗口大小改变时调用 handleMarquee
$(window).on("resize", handleMarquee);
// 页面加载时立即调用一次，设置初始状态
handleMarquee();
});
</script>
</body>
</html>注意事项与最佳实践
-
性能优化：debounce 或 throttle resize 事件： resize 事件在用户拖动浏览器窗口时会频繁触发。虽然matchMedia本身比每次都查询$(window).width()效率更高，但为了进一步优化性能，可以考虑使用debounce（防抖）或throttle（节流）技术来限制handleMarquee函数的执行频率。
- 防抖 (Debounce): 在事件停止触发一定时间后才执行函数。
- 节流 (Throttle): 在一段时间内只执行一次函数。 你可以引入一个像 Lodash 这样的库来轻松实现这些功能，或者手动编写一个简单的防抖函数。
// 简单的防抖函数示例 function debounce(func, delay) { let timeout; return function(...args) { const context = this; clearTimeout(timeout); timeout = setTimeout(() => func.apply(context, args), delay); }; } // 使用防抖 $(window).on("resize", debounce(handleMarquee, 250)); // 250ms 延迟 插件兼容性： 并非所有jQuery插件都提供destroy方法。在处理其他插件时，请务必查阅其文档，了解如何正确地停止或清理插件实例。
替代状态管理： 除了使用data-*属性，你也可以使用一个全局变量或一个更复杂的对象来管理插件的状态。然而，对于单个元素上的插件，data-*属性通常是最简洁和直观的选择。
CSS 媒体查询与 JavaScript 同步： 确保 JavaScript 中的媒体查询断点（例如 768px）与你的 CSS 媒体查询断点保持一致，以避免视觉或功能上的不匹配。
总结
通过结合使用 window.matchMedia() 和 jQuery 的 data-* 属性，我们可以构建一个健壮且高效的响应式解决方案，以在特定屏幕尺寸下动态地管理 jQuery.Marquee 插件的生命周期。这种方法不仅避免了常见的性能问题和错误，还提升了用户体验，确保了网页在不同设备上的表现一致且流畅。记住，在实际项目中，可以进一步引入防抖或节流机制来优化resize事件的处理，从而达到更好的性能。
