2

我正在使用从右侧到左侧的选框滚动。下面的代码工作正常。但它滚动不顺畅。“悬停在我身上停止”内容正在闪烁或闪烁。我需要一个 100% 平滑滚动的下面的选框。请帮我。没有javascript是否有可能？

<marquee behavior='scroll' direction='left' scrollamount='3' onmouseover='this.stop()' onmouseout='this.start()'>Hover on me to stop</marquee>
4

2 回答 2

4

如果您想使用纯 CSS 进行尝试，那么这是最简单的方法。尽管您需要检查对旧浏览器的支持并添加供应商前缀。

.marquee-parent {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 30px;
}
.marquee-child {
  display: block;
  width: 147px;
  /* width of your text div */
  height: 30px;
  /* height of your text div */
  position: absolute;
  animation: marquee 5s linear infinite; /* change 5s value to your desired speed */
}
.marquee-child:hover {
  animation-play-state: paused;
  cursor: pointer;
}
@keyframes marquee {
  0% {
    left: 100%;
  }
  100% {
    left: -147px /* same as your text width */
  }
}
<div class="marquee-parent">
  <div class="marquee-child">
    Hover on me to stop
  </div>
</div>

于 2016-09-16T06:03:15.267 回答
-2

派对有点晚了。。

为此有一个角度指令：https ://github.com/davidtran/angular-marquee 。您无需触摸任何 js - 只需添加指令标记即可完成

<div angular-marquee></div>

它不会依赖于“不推荐使用的标签”论点，而是依赖于现代解决方案

于 2016-06-15T19:17:26.387 回答