本教程将详细介绍如何利用jquery和`window.matchmedia`实现一个响应式的跑马灯（marquee）效果。我们将学习如何根据屏幕宽度动态地初始化跑马灯插件，并在宽度条件不满足时安全地销毁它，避免重复初始化导致的潜在问题，从而优化用户体验和页面性能。
在现代网页设计中，响应式布局是不可或缺的。许多UI组件需要根据设备屏幕尺寸进行调整，甚至在特定尺寸下完全启用或禁用。jQuery Marquee插件提供了一种创建滚动文本或图片效果的简便方式，但在不同屏幕尺寸下，我们可能希望其行为有所不同。例如，在移动设备上启用跑马灯以节省空间，而在桌面设备上则禁用，以提供更静态的布局。
本教程将指导您如何实现一个智能的响应式跑马灯，它能够根据屏幕宽度自动初始化或销毁，确保在任何设备上都能提供最佳的用户体验。
直接在$(window).on('resize', function() { ... })事件中根据宽度条件进行初始化和销毁，可能会遇到以下问题：
为了解决这些问题，我们需要一种机制来跟踪插件的当前状态（是否已初始化），并利用更高效的媒体查询方法。
我们将结合使用以下技术来构建健壮的响应式跑马灯：
首先，确保您的页面中已引入jQuery库和jQuery Marquee插件。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式jQuery Marquee</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.tt-services-listing {
white-space: nowrap;
overflow: hidden;
border: 1px solid #ccc;
padding: 10px;
background-color: #f9f9f9;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="tt-services-listing">
这是一个需要滚动的文本内容，当屏幕宽度小于768px时，它将以跑马灯形式滚动。请尝试调整浏览器窗口大小。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat.
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>
<!-- 请确保您的Marquee插件路径正确 -->
<script src="https://cdn.jsdelivr.net/npm/jquery.marquee@1.6.0/jquery.marquee.min.js"></script>
<script>
// 您的JavaScript代码将放在这里
</script>
</body>
</html>我们将使用window.matchMedia()来定义媒体查询，并创建一个处理函数来管理跑马灯的生命周期。
jQuery($ => { // DOM ready and $ alias in scope
// 定义媒体查询对象：当屏幕宽度小于768px时匹配
const m768 = matchMedia("(width < 768px)");
// 获取目标元素
const $listings = $('.tt-services-listing');
// 定义跑马灯的配置选项
const marqueeOptions = {
duration: 20000, // 滚动一圈所需时间（毫秒）
duplicated: true, // 是否复制内容以实现无缝滚动
delayBeforeStart: 0, // 滚动开始前的延迟（毫秒）
startVisible: true, // 初始时是否可见
// 其他可选配置...
};
// 定义处理跑马灯初始化和销毁的函数
const handleMarquee = () => {
// 检查当前是否匹配媒体查询（即屏幕宽度小于768px）
// 并且检查跑马灯是否尚未初始化（通过data属性判断）
if (m768.matches && !$listings.data("marqueeinit")) {
// 如果匹配且未初始化，则初始化跑马灯
$listings.data("marqueeinit", 1); // 设置data属性标记为已初始化
$listings.marquee(marqueeOptions);
console.log('Marquee initialized.');
}
// 否则，如果当前不匹配媒体查询（即屏幕宽度大于等于768px）
// 并且跑马灯已经初始化
else if (!m768.matches && $listings.data("marqueeinit")) {
// 如果不匹配且已初始化，则销毁跑马灯
$listings.removeData("marqueeinit"); // 移除data属性
$listings.marquee("destroy");
console.log('Marquee destroyed.');
}
};
// 绑定resize事件：当窗口大小改变时调用处理函数
$(window).on("resize", handleMarquee);
// 页面加载时立即调用一次处理函数，以设置初始状态
handleMarquee();
});Debounce resize事件： resize事件在用户调整窗口时会频繁触发，这可能导致handleMarquee函数被多次调用，虽然我们的逻辑已经避免了重复初始化/销毁，但仍然可能造成不必要的计算。在实际项目中，可以考虑对resize事件进行防抖（debounce）处理，例如使用Lodash库的_.debounce()方法，或手动实现一个防抖函数，以限制函数调用的频率。
// 简单的防抖函数示例
const 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, 200)); // 200ms的延迟插件兼容性： 确保您使用的jQuery插件提供了destroy方法。如果插件没有提供，您可能需要手动移除其生成的DOM元素和事件监听器，或者重新加载包含该组件的区域。
媒体查询阈值： 根据您的设计需求调整"(width < 768px)"中的宽度值。常见的断点包括768px（平板电脑/小屏幕桌面）和480px（手机）。
初始状态： handleMarquee()在页面加载时调用一次是至关重要的，它确保在用户没有触发resize事件之前，跑马灯就能处于正确的初始状态。
替代状态管理： 除了data()属性，您也可以使用一个全局变量或模块作用域内的变量来跟踪跑马灯的初始化状态，但data()属性的好处是它直接与DOM元素关联，更具局部性和可维护性。
通过结合使用window.matchMedia()和jQuery的data()方法，我们成功地构建了一个高效且健壮的响应式jQuery Marquee解决方案。这种方法不仅解决了重复初始化和销毁的潜在问题，还通过利用原生媒体查询API提升了性能。遵循这些最佳实践，您可以为用户提供一个无缝且响应迅速的网页体验，无论他们使用何种设备。
以上就是响应式jQuery Marquee：根据屏幕宽度动态初始化与销毁的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
331
收藏
