本教程详细介绍了如何使用 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 插件。建议将它们放在
标签的末尾，或者使用 defer 属性加载脚本。
2. HTML 结构
为您的 Marquee 内容准备一个容器元素。这里我们使用一个带有 tt-services-listing 类的 div 元素作为示例。
这是您希望滚动的文本内容。它会根据屏幕宽度在移动端滚动，在桌面端停止。 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
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 { // 检查当前是否匹配移动端宽度 (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 : 创建一个 MediaQueryList 对象，用于监听 width 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 事件监听可能带来的性能和逻辑问题，也使得代码更加健壮和易于维护，为用户提供了更流畅、更符合预期的交互体验。
以上就是如何实现响应式 jQuery Marquee：移动端初始化，桌面端销毁的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1531130.html
微信扫一扫 
支付宝扫一扫 
