Question

我已经研究了一段时间，还没有找到合适的解决方案。

我有一些横幅文本必须绝对滚动/选取框。我使用的示例是库存数据，但它是其他用户定义的文本，最终将在我的最终页面解决方案中使用。

我要解决的问题是文本被剪切并且在重复之前无法完全显示所有文本。

第二个是重新启动之前要平滑过渡。即一个真正的“圆形”循环。

但这是一个非常标准的基于HTML / CSS的“字幕”。

关于以上任何想法，将不胜感激。

var text = 'Symbol: BABA Open: 168.71 Latest: 166.15 Change: -2.23 Symbol: PEP Open: 115.87 Latest: 115.91 Change: 3.32 Symbol: AAPL Open: 171.47 Latest: 170.42 Change: -0.38 Symbol: AMZN Open: 1627.86 Latest: 1607.95 Change: -14.7 Symbol: FB Open: 164.7 Latest: 162.5 Change: -1.45 Symbol: NFLX Open: 359 Latest: 356.87 Change: -2.2 Symbol: USO Open: 11.61 Latest: 11.71 Change: 0.23 Symbol: NKE Open: 85.56 Latest: 85.38 Change: 0.7 Symbol: YUM Open: 94.69 Latest: 94.12 Change: 0.27 Symbol: LEE Open: 2.64 Latest: 2.61 Change: -0.02';

//text is cutoff at width of parent container
$("#marquee-text").text(text);

.scroller {
  height: 20px;
  overflow: hidden;
  position: relative;
}

.scroller p,
.scroller span {
  /*font-size: 3em;*/
  white-space: nowrap;
  color: black;
  position: absolute;
  width: 100%;
  /*height: 100%;*/
  margin: 0;
  /*line-height: 50px;*/
  /*text-align: center;*/
  /* Starting position */
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  /* Apply animation to this element */
  -moz-animation: example1 15s linear infinite;
  -webkit-animation: example1 15s linear infinite;
  animation: example1 15s linear infinite;
}


/* Move it (define the animation) */

@-moz-keyframes example1 {
  0% {
    -moz-transform: translateX(100%);
  }
  100% {
    -moz-transform: translateX(-100%);
  }
}

@-webkit-keyframes example1 {
  0% {
    -webkit-transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
  }
}

@keyframes example1 {
  0% {
    -moz-transform: translateX(100%);
    /* Firefox bug fix */
    -webkit-transform: translateX(100%);
    /* Firefox bug fix */
    transform: translateX(100%);
  }
  100% {
    -moz-transform: translateX(-100%);
    /* Firefox bug fix */
    -webkit-transform: translateX(-100%);
    /* Firefox bug fix */
    transform: translateX(-100%);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="marquee-div" class="scroller">
  <span id="marquee-text"></span>
</div>

Answer 1

如果您想要一个真正的圆形选框而不清除屏幕上的文字，然后再输入第一行，则必须将div图层复制两次，以便第二个图层在第一个图层结束后才出现（否则，您会得到文本之间再次出现间隙，请查看以下示例：

<div class="marquee">
  <div>
    <span>You spin me right round, baby. Like a record, baby.</span>
    <span>You spin me right round, baby. Like a record, baby.</span>
  </div>
</div>

和CSS：

.marquee {
  height: 25px;
  width: 420px;

  overflow: hidden;
  position: relative;
}

.marquee div {
  display: block;
  width: 200%;
  height: 30px;

  position: absolute;
  overflow: hidden;

  animation: marquee 5s linear infinite;
}

.marquee span {
  float: left;
  width: 50%;
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}

（摘自https://codepen.io/jamesbarnett/pen/kfmKa[scrolling CSS字幕示例] [1]

Answer 2

您可以使用老式的字幕：

<marquee behavior="scroll" direction="left" scrollamount="80" scrolldelay="1000">
   <span id="marquee-text"></span>
</marquee>

尽管它是旧的html，但在所有浏览器上都能正常工作。

var text = 'Symbol: BABA Open: 168.71 Latest: 166.15 Change: -2.23 Symbol: PEP Open: 115.87 Latest: 115.91 Change: 3.32 Symbol: AAPL Open: 171.47 Latest: 170.42 Change: -0.38 Symbol: AMZN Open: 1627.86 Latest: 1607.95 Change: -14.7 Symbol: FB Open: 164.7 Latest: 162.5 Change: -1.45 Symbol: NFLX Open: 359 Latest: 356.87 Change: -2.2 Symbol: USO Open: 11.61 Latest: 11.71 Change: 0.23 Symbol: NKE Open: 85.56 Latest: 85.38 Change: 0.7 Symbol: YUM Open: 94.69 Latest: 94.12 Change: 0.27 Symbol: LEE Open: 2.64 Latest: 2.61 Change: -0.02';

//text is cutoff at width of parent container
$("#marquee-text").text(text);

.scroller {
 height: 20px;  
 overflow: hidden;
 position: relative;
}
.scroller p, .scroller span {
 /*font-size: 3em;*/
 white-space: nowrap;
 color: black;
 position: absolute;
 width: 100%;
 
 /*height: 100%;*/
 margin: 0;
 /*line-height: 50px;*/
 /*text-align: center;*/
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);    
 transform:translateX(100%);
 /* Apply animation to this element */  
 -moz-animation: example1 20s linear infinite;
 -webkit-animation: example1 20s linear infinite;
 animation: example1 20s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
 0%   { 
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%);       
 }
 100% { 
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%); 
 }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<marquee behavior="scroll" direction="left" scrollamount="80" scrolldelay="1000">
   <span id="marquee-text"></span>
</marquee>

Answer 3

我发现了数据被截断到父容器的问题，并且不敢相信我错过了：

 .scroller p, .scroller span {
   ...
   width: 100%; /* <== THIS */
   ...
 }

我将回过头去讨论另一半问题的“ 200％”建议，但主要问题已解决。

感谢大家一直以来都是一个了不起的声音板！

HTML滚动文本比容器宽

3 个答案: