首页 > 营销学院 > 技术知识

响应式jQuery Marquee：移动端初始化与桌面端销毁的实现指南

本文详细介绍了如何使用jquery和`window.matchmedia()`实现响应式marquee效果，确保在移动设备（屏幕宽度小于768px）上自动初始化marquee插件，而在桌面设备上（屏幕宽度大于等于768px）自动销毁。通过结合`data-*`属性进行状态管理，避免了插件重复初始化或销毁导致的错误，提供了一个健壮且性能优化的解决方案。

在现代网页设计中，为了提供最佳的用户体验，许多交互元素需要根据设备的屏幕尺寸进行动态调整。Marquee（跑马灯）效果作为一种常见的文本或图片滚动展示方式，在移动设备上可能有助于节省空间并吸引用户注意力，但在桌面设备上则可能显得冗余或分散注意力。因此，实现一个能在移动端初始化、在桌面端销毁的响应式Marquee功能变得尤为重要。

核心实现原理

要实现这一功能，我们需要解决两个主要问题：

实时检测屏幕宽度变化：准确判断当前设备是移动端还是桌面端。
管理Marquee插件状态：避免在插件未初始化时尝试销毁，或在已初始化时重复初始化。

本教程将结合jQuery库、jQuery.Marquee插件、window.matchMedia() API以及HTML data-* 属性来构建一个稳定可靠的解决方案。

准备工作

首先，确保你的项目中已引入jQuery库和jQuery.Marquee插件。你可以通过CDN或本地文件引入它们：

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

接下来，定义一个用于展示Marquee内容的HTML元素。例如：

<div class="tt-services-listing">
  这是需要滚动的文本内容。请调整浏览器窗口大小，观察Marquee效果的变化。
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

响应式Marquee逻辑实现

我们将使用window.matchMedia()来监听屏幕宽度的变化，并利用元素的data-*属性来跟踪Marquee插件的初始化状态。

1. 使用 window.matchMedia() 进行媒体查询

window.matchMedia()是一个强大的API，允许我们在J*aScript中执行CSS媒体查询。它返回一个MediaQueryList对象，其中包含matches属性（一个布尔值，指示当前文档是否匹配媒体查询）和addListener()方法（用于监听媒体查询状态的变化）。

SONIFY.io

设计和开发音频优先的产品和数据驱动的解决方案

75 查看详情 SONIFY.io

jQuery($ => { // 确保DOM加载完毕且 $ 别名可用

  // 定义媒体查询：当屏幕宽度小于768px时匹配
  const m768 = matchMedia("(width < 768px)");
  // 获取需要应用Marquee效果的元素
  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")) {
      // 设置 data-marqueeinit 属性为1，表示已初始化
      $listings.data("marqueeinit", 1);
      // 初始化Marquee插件
      $listings.marquee(marqueeOptions);
    }
    // 如果当前屏幕宽度大于等于768px (桌面端) 且 Marquee已初始化
    else if (!m768.matches && $listings.data("marqueeinit")) {
      // 移除 data-marqueeinit 属性，表示已销毁
      $listings.removeData("marqueeinit");
      // 销毁Marquee插件
      $listings.marquee("destroy");
    }
  };

  // 监听窗口大小变化事件，每次变化时调用 handleMarquee 函数
  $(window).on("resize", handleMarquee);
  // 页面加载时立即执行一次 handleMarquee，以根据初始屏幕宽度设置Marquee状态
  handleMarquee();

});

2. 代码详解

jQuery($ => { ... });: 这是jQuery的一种简写方式，确保在DOM加载完毕后执行代码，并且$符号在函数作用域内指向jQuery对象，避免与其他库的冲突。
const m768 = matchMedia("(width : 创建一个MediaQueryList对象，用于检测屏幕宽度是否小于768像素。
const $listings = $('.tt-services-listing');: 缓存jQuery对象，提高性能。
marqueeOptions: 定义了Marquee插件的配置。你可以根据需求调整这些参数。
handleMarquee() 函数：
- m768.matches && !$listings.data("marqueeinit"): 这个条件判断当前是否处于移动端 (m768.matches 为 true) 并且Marquee插件尚未在该元素上初始化 ($listings.data("marqueeinit") 为 undefined 或 falsey)。
- $listings.data("marqueeinit", 1);: 如果满足初始化条件，我们通过jQuery的data()方法在元素上设置一个自定义数据属性data-marqueeinit。这个属性充当一个标志，记录Marquee是否已经初始化。
- $listings.marquee(marqueeOptions);: 调用Marquee插件进行初始化。
- !m768.matches && $listings.data("marqueeinit"): 这个条件判断当前是否处于桌面端 (!m768.matches 为 true) 并且Marquee插件已在该元素上初始化 ($listings.data("marqueeinit") 为 true 或 truthy)。
- $listings.removeData("marqueeinit");: 如果满足销毁条件，移除data-marqueeinit属性，清除初始化标志。
- $listings.marquee("destroy");: 调用Marquee插件的destroy方法来销毁它。
$(window).on("resize", handleMarquee);: 绑定resize事件监听器。当浏览器窗口大小改变时，handleMarquee函数会被调用。
handleMarquee();: 在脚本加载和DOM准备就绪后立即调用一次handleMarquee，以确保在页面加载时就根据当前屏幕尺寸正确设置Marquee状态。

注意事项与最佳实践

避免重复操作：原始代码中的问题在于，在resize事件中没有检查Marquee是否已经初始化或销毁，导致可能在已初始化的情况下重复初始化，或在未初始化的情况下尝试销毁，从而引发错误。通过data-marqueeinit属性进行状态管理完美解决了这个问题。
window.matchMedia() 的优势：
- 性能优化：相较于在resize事件中频繁读取$(window).width()，matchMedia更高效，因为它只在媒体查询状态真正改变时才更新其matches属性，并且可以监听这些变化。
- 语义化：直接使用CSS媒体查询的语法，代码更清晰易懂。
Debounce resize 事件 (可选)：尽管matchMedia本身已经很高效，但如果你有其他复杂的逻辑也在resize事件中执行，考虑使用防抖（debounce）技术来限制handleMarquee函数被调用的频率，进一步优化性能。例如：
```
let resizeTimer;
$(window).on("resize", () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(handleMarquee, 200); // 200ms 延迟
});
```
插件路径：确保jquery.marquee.min.js的CDN链接是正确的。email protected] 这种格式通常是防止爬虫的，实际使用时应替换为正确的CDN路径，例如https://cdn.jsdelivr.net/npm/jquery.marquee@1.6.0/jquery.marquee.min.js。

总结

通过结合window.matchMedia()进行响应式判断和data-*属性进行状态管理，我们可以优雅地实现jQuery Marquee插件在不同屏幕尺寸下的动态初始化和销毁。这种方法不仅解决了常见的重复初始化或销毁错误，还提供了一个性能更优、代码更清晰的解决方案，是实现复杂响应式交互的有效实践。

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

# javascript # java # jquery # html # js # css # 你可以 # 化与 # 这是 # 加载 # 网页设 # 爬虫 # win # ai # 浏览器 # npm # cdn # 是一个 # 吉林seo排名需要做吗 # 宣城百度网站推广费用 # 如何推广自己的优惠网站 # 黑河seo推广网站 # 上海网站建设哪家强 # 公司网站建设优点缺点 # 舞钢网站建设推广 # 更清晰 # 事件中 # 移除 # 屏幕尺寸 # 能在 # 济宁网站建设模块有哪些 # 昌黎智能网站建设 # 延庆网站建设师

相关栏目：【 Google疑问12 】【 Facebook疑问10 】【优化推广96088 】【技术知识133117 】【 IDC资讯59369 】【网络运营7196 】【 IT资讯61894 】

2025-10-20

SQL多表关联如何理解_核心原理解析助你掌握关键方法【教程】 SQL多表连接如何理解_JOIN关联关系详细步骤解析【指导】 SQL多表连接结果异常怎么办_JOIN条件排查方法解析【指导】 SQL索引下推是什么_ICP机制性能提升原理【教程】 SQL跨表统计怎么写_重要技巧总结提升查询效率【技巧】 SQL注入如何防护_完整逻辑拆解助力系统化掌握【技巧】 SQL上传文件信息建模方法_SQL存储文件元数据方案 SQL多语种存储方案设计_SQL字符集选择策略 SQL字符串处理如何编写_重要技巧总结提升查询效率【教学】 SQL去重查询怎么实现_优化思路讲解帮助高效处理数据【技巧】 SQL统计复购用户怎么做_多次行为分析SQL思路【教程】 SQL字符串处理如何编写_优化思路讲解帮助高效处理数据【教程】 SQL动态字段解析技巧_SQL解析JSON多层字段 SQL线上慢SQL如何治理_规范与工具实践总结【技巧】 SQL表结构如何演进_兼容老数据设计思路【教程】 SQL排序规则如何设置_ORDERBY排序原理与性能说明【指导】 SQL去重查询怎么实现_真实案例解析强化复杂查询思维【教学】 SQL按字段范围分批处理_SQL避免长时间锁表 SQL统计不同字段组合数量_多列聚合查询技巧【技巧】 SQL多字段去重怎么处理_GROUPBY去重思路说明【教学】

了解您产品搜索量及市场趋势，制定营销计划

同行竞争及网站分析保障您的广告效果

点击免费数据支持

提交您的需求，1小时内享受我们的专业解答。

运城市盐湖区信雨科技有限公司

运城市盐湖区信雨科技有限公司是一家深耕海外推广领域十年的专业服务商，作为谷歌推广与Facebook广告全球合作伙伴，聚焦外贸企业出海痛点，以数字化营销为核心，提供一站式海外营销解决方案。公司凭借十年行业沉淀与平台官方资源加持，打破传统外贸获客壁垒，助力企业高效开拓全球市场，成为中小企业出海的可靠合作伙伴。