本教程旨在解决jquery marquee插件在不同设备尺寸下响应式管理的问题。我们将学习如何利用`window.matchmedia`进行媒体查询，并结合数据属性（`data-*`）来精确控制插件的初始化与销毁，确保在窗口大小调整时，marquee效果能在移动端自动启用，在桌面端自动停用，从而避免性能问题和功能冲突。
在现代网页设计中，响应式布局已成为标准。许多JavaScript插件（如jQuery Marquee）在不同屏幕尺寸下的行为需要精确控制。例如，一个文本滚动效果可能只适用于移动设备，而在桌面端则希望它保持静态。简单地在resize事件中重复初始化或销毁插件，可能导致性能问题甚至页面崩溃，因为插件可能已被初始化或已被销毁。本教程将介绍一种健壮的方法，用于在特定屏幕宽度下动态地初始化和销毁jQuery Marquee插件。
jQuery.Marquee是一个轻量级的jQuery插件，用于创建水平或垂直滚动的文本或元素。它提供了多种配置选项，如滚动速度、方向、是否复制内容等。在我们的场景中，我们将关注其初始化和销毁方法。
原始代码中遇到的问题，通常是由于以下原因：
为了解决上述问题，我们将采用以下策略：
首先，确保你的项目中已引入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>
我们使用 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
};
// ... 后续代码
});这是核心逻辑所在。此函数将根据当前的媒体查询状态和插件的初始化状态来决定是初始化还是销毁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");
}
};将 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函数的执行频率。
// 简单的防抖函数示例
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事件的处理，从而达到更好的性能。
以上就是响应式jQuery Marquee：在移动端初始化与桌面端销毁的实现指南的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
252
收藏
