【问题标题】:jQuery text ticker pause on hover悬停时jQuery文本自动收录器暂停
【发布时间】:2020-04-09 00:26:51
【问题描述】:

我找到了这个文本代码:http://jsfiddle.net/4mTMw/8/

如何在悬停时暂停文本?

我试过了:

marquee.hover(function() {
    clearInterval(marquee);
    clearInterval(mar);
    marquee.css('animation-play-state', 'paused');
    mar.css('animation-play-state', 'paused');
    marquee.stop();
    mar.stop();
});

没有任何作用。

【问题讨论】:

  • 这能回答你的问题吗? jquery pause on hover
  • 不太清楚,clearInterval(mar.marquee);没有阻止它
  • 使用clearInterval(marquee.data("interval"));

标签: jquery ticker


【解决方案1】:

工作示例:https://jsfiddle.net/Twisty/qL93omsj/2/

JavaScript

$(function() {
  var marquee = $('div.marquee');
  marquee.each(function() {
    var mar = $(this),
      indent = mar.width();
    mar.marquee = function() {
      indent--;
      mar.css('text-indent', indent);
      if (indent < -1 * mar.children('div.marquee-text').width()) {
        indent = mar.width();
      }
    };
    mar.data('interval', setInterval(mar.marquee, 1000 / 60));
    mar.hover(function() {
      clearInterval($(this).data("interval"));
    }, function() {
      $(this).data('interval', setInterval(mar.marquee, 1000 / 60));
    });
  });
});

间隔保存到数据中。您需要使用 clearInterval() 来暂停它。

【讨论】:

  • 您知道如何在点击时停止和启动它吗?复制“悬停”并将其更改为“点击”并不会阻止它,实际上会使速度加倍。
  • @linuxoid hover 接受两个函数,其中click 只接受一个。所以你需要建立一个切换标志。 When the marquee starts, add a data flag that can be true / false.然后在您的点击功能中,您可以检查此标志并执行选取框的停止/启动。
猜你喜欢
  • 1970-01-01
  • 2015-07-27
  • 1970-01-01
  • 2014-06-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多