Question

我有一行滚动文本在我正在处理的网站页面上运行，当用户将鼠标悬停在它上面时，我试图让文本移动暂停，任何人都可以建议如何调整 jQuery 代码以实现此目的?

// Start marquee
$('.marquee_text').marquee({
    direction: 'left',
    duration: 50000,
    gap: 50,
    delayBeforeStart: 0,
    duplicated: true,
    startVisible: true
});

html {
    font-size: 10px;
}

body {
    color: #231815;
    font-family: system-ui, monospace;

    margin: 0;
    padding: 0;
    overflow: hidden;
}

.marquee_text {
    font-size: 6rem;
    font-weight: bold;
    line-height: 7rem;

    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.5.0/jquery.marquee.min.js"></script>

<div class="marquee_text">This text flows right to left by jQuery marquee Plug-In. That direction and speed can optionally be changed.</div>

Answer 1

如果您阅读了 JS 文件顶部引用的 marquee 库的 documentation，您会看到它有一个 pauseOnHover 属性，您可以将其用于此确切目的。

$('.marquee_text').marquee({
  direction: 'left',
  duration: 50000,
  gap: 50,
  delayBeforeStart: 0,
  duplicated: true,
  startVisible: true,
  pauseOnHover: true // add this:
});

html {
  font-size: 10px;
}

body {
  color: #231815;
  font-family: system-ui, monospace;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.marquee_text {
  font-size: 6rem;
  font-weight: bold;
  line-height: 7rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.5.0/jquery.marquee.min.js"></script>

<div class="marquee_text">This text flows right to left by jQuery marquee Plug-In. That direction and speed can optionally be changed.</div>

悬停以暂停选框 Jquery

1 个答案: