如何使用jQuery在移动的初始化marquee并在桌面端销毁

zu0ti5jz 于 2023-06-22 发布在 jQuery

关注(0)|答案(2)|浏览(178)

我如何在移动的初始化marquee并在桌面上使用jQuery销毁它？每次我最小化窗口宽度时，我想检查它是否达到最小阈值，如果它小于<767 px，我想初始化字幕。如果用户扩展窗口宽度> 767 px，我希望字幕被破坏。
我现在的代码似乎是错误的，因为它崩溃了整个网站。
这是我用来参考的存储库https://github.com/aamirafridi/jQuery.Marquee

<script src="//cdn.jsdelivr.net/npm/jquery.marquee@1.6.0/jquery.marquee.min.js" type="text/javascript" defer></script>
<script>
  window.onload = function () {
    if (window.jQuery) {
      $(function () {
        var width = $(window).width();
        if (width <= 767) {
          $('.tt-services-listing').marquee({
            duration: 20000,
            duplicated: true,
            delayBeforeStart: 0,
            startVisible: true,
          });
        }
        $(window).on('resize', function () {
          if (width >= 768) {
            // I want to check here each time the user resize, if hits the threshold, DESTROY marquee here
            $('.tt-services-listing').marquee('destroy');
          } else {
            $('.tt-services-listing').marquee({
              duration: 20000,
              duplicated: true,
              delayBeforeStart: 0,
              startVisible: true,
            });
          }
        });
      });
    }
  };
</script>

jquery

来源：https://stackoverflow.com/questions/76404656/how-to-initialize-marquee-on-mobile-and-destroy-on-desktop-with-jquery

2条答案

按热度按时间

jgwigjjp1#

您需要检查插件是否在该元素上初始化。
您可以像data-marqueeinit一样分配data-*属性。
您还可以使用window.matchMedia()来检查当前的根宽度

jQuery($ => { // DOM ready and $ alias in scope

  // Marquee

  const m768 = matchMedia("(width < 768px)");
  const $listings = $('.tt-services-listing');
  const marqueeOptions = {duration: 20000, duplicated: true, delayBeforeStart: 0, startVisible: true};

  const handleMarquee = () => {
    if (m768.matches && !$listings.data("marqueeinit")) {
      $listings.data("marqueeinit", 1);
      $listings.marquee(marqueeOptions);
    }
    else if (!m768.matches && $listings.data("marqueeinit")) {
      $listings.removeData("marqueeinit");
      $listings.marquee("destroy");
    }
  };

  $(window).on("resize", handleMarquee);
  handleMarquee();

});

<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.js"></script>
<script src="//cdn.jsdelivr.net/npm/jquery.marquee@1.6.0/jquery.marquee.min.js"></script>

赞(0）回复(0）举报 2023-06-22

pn9klfpd2#

是否必须使用jQuery？如果不是，那么我相信它也可以通过媒体查询来实现。
只要把这些行添加到你的CSS文件中...
//css从这里开始//

marquee {
    display: none;
}

@media only screen and (max-width: 767px) {

    marquee {
        display: block;
    }
    
}

赞(0）回复(0）举报 2023-06-22

我来回答

如何使用jQuery在移动的初始化marquee并在桌面端销毁

2条答案

相关问题

热门标签

最新问答