Question

我想在hover上创建一个简单的文本框自动滚动变体，如here所示。当您将鼠标悬停在框上时，文本会滚动。当您将鼠标移出时，文本将重置为开头。这就是我所追求的一切。

似乎有一个类似的问题：Auto scroll text effect。但是，示例链接不起作用（至少对我来说）并且我无法明确地说它是否与我之后的相同。此问题也假定了一个jquery环境。我正在使用原生JS。

我不确定是否需要JS，html / css解决方案也是受欢迎的。让我知道我可以为这项任务付出什么。

Answer 1

您可以为文本框或div指定类：

  .mydiv:hover {  
    animation: scrolling 12s .2s linear 1;
  }


  @keyframes scrolling {
    from { top: 0; transform: translate3d(0, 0, 0); }
    to { transform: translate3d(0, -100%, 0); }
  }

您可能需要为其提供一些overflow: auto;和overflow-x: hidden;

Answer 2

有一个类似于你的确切问题{{3}}。

您可能还希望看到此here。

关于使用question，marquee进行滚动。

<强>示例：

＆＃13;

<!DOCTYPE html>
<title>My Example</title>

<marquee behavior="scroll" direction="up" id="mymarquee" scrollamount="1" onmouseover="this.stop();" onmouseout="this.start();">
<p>This the the sample</p>
<p>of my text</p>
</marquee>

＆＃13;

冗长段落：

＆＃13;

#mypara {
  display: block;
  width: 150px;
  word-wrap: break-word;
}

＆＃13;

<title>My Example</title>

<marquee behavior="scroll" direction="up" id="mymarquee" scrollamount="1" onmouseover="this.stop();" onmouseout="this.start();">
  <p id="mypara">This the the sample.This the the sample.This the the sample.This the the sample.This the the sample.This the the sample.This the the sample.This the the sample.This the the sample.This the the sample.This the the sample.This the the sample.This the the sample.This the the sample.</p>
</marquee>

＆＃13;

Answer 3

div = document.getElementById("whatever_your_textboxes_id_is")

div.scrollTop = div.scrollHeight;

自动/电影滚动文本框效果CSS / JS

3 个答案: